@mizen-labs/ui 0.0.0-stage → 0.1.0

package/dist/components/composer/composer-editor.d.ts

@@ -0,0 +1,57 @@
+import { type ComponentProps, type MouseEvent, type ReactElement, type ReactNode } from "react";
+import { type ComposerEditorController, type ComposerItemValue, type ComposerValue, type UseComposerEditorOptions } from "./use-composer-editor";
+type ComposerEditorOptions = Omit<UseComposerEditorOptions, "value" | "onValueChange"> & {
+    value?: ComposerValue;
+    defaultValue?: ComposerValue;
+    onValueChange?: UseComposerEditorOptions["onValueChange"];
+    name?: string;
+    getSuggestionsAnnouncement?: (count: number) => string;
+};
+type ComposerContextValue = Omit<ComposerEditorController, "reset"> & {
+    reset: () => void;
+};
+declare function useComposerEditorContext(): ComposerContextValue | null;
+declare function useComposerContext(): Pick<ComposerContextValue, "value" | "isEmpty" | "canSubmit" | "disabled" | "readOnly" | "status" | "submit" | "insertTrigger" | "reset">;
+declare function ComposerEditorProvider({ children, value, defaultValue, onValueChange, getSuggestionsAnnouncement, ...options }: ComposerEditorOptions & {
+    children: ReactNode;
+}): ReactElement;
+interface MountedOption {
+    disabled: boolean;
+    element: HTMLElement;
+}
+interface SuggestionContext {
+    highlightedId: string | undefined;
+    highlightItem: (item: ComposerItemValue) => void;
+    inputProps: ComponentProps<"div">;
+    items: readonly ComposerItemValue[];
+    listId: string;
+    registerItem: (id: string, option: MountedOption | null) => void;
+    registerList: (element: HTMLElement | null) => void;
+    selectItem: (item: ComposerItemValue) => void;
+}
+declare function useComposerSuggestionsContext(): SuggestionContext | null;
+declare function useComposerItem(value: ComposerItemValue | undefined, disabled: boolean): {
+    highlighted: boolean;
+    props: {
+        onClick(): void;
+        onMouseDown(event: MouseEvent<HTMLButtonElement>): void;
+        onPointerMove(): void;
+        "aria-disabled": true | undefined;
+        "aria-selected": boolean | undefined;
+        "data-disabled": string | undefined;
+        "data-highlighted": string | undefined;
+        id: string | undefined;
+        role: "option" | undefined;
+        tabIndex: number | undefined;
+    };
+    ref: (element: HTMLElement | null) => void;
+};
+declare function focusComposerInput(event: MouseEvent<HTMLFormElement>, preventDefault: boolean): void;
+declare function bindInputLayout(input: HTMLElement | null): (() => void) | undefined;
+declare function useComposerInputLayout(): {
+    inputRef: typeof bindInputLayout;
+};
+export { readToken as readComposerToken } from "./composer-document";
+export { type ComposerChangeDetails, type ComposerItemValue, type ComposerPart, type ComposerQuery, type ComposerTokenPart, type ComposerTrigger, type ComposerTriggerState, type ComposerValue, getComposerText, useComposerFilter, } from "./use-composer-editor";
+export type { ComposerEditorOptions };
+export { ComposerEditorProvider, focusComposerInput, useComposerContext, useComposerEditorContext, useComposerInputLayout, useComposerItem, useComposerSuggestionsContext, };

package/dist/components/composer/composer-editor.js

@@ -0,0 +1,4 @@
+"use client";import{Popover}from"@base-ui/react/popover";import{props as stylexProps}from"@stylexjs/stylex";import{createContext,createElement,useCallback,useContext,useId,useState}from"react";import{visuallyHiddenStyles}from"../visually-hidden/visually-hidden.styles";import{useComposerEditor}from"./use-composer-editor";const EditorContext=createContext(null);function useComposerEditorContext(){return useContext(EditorContext);}function useComposerContext(){const editor=useComposerEditorContext();if(!editor){throw new Error("useComposerContext must be used within Composer.");}return{canSubmit:editor.canSubmit,disabled:editor.disabled,insertTrigger:editor.insertTrigger,isEmpty:editor.isEmpty,readOnly:editor.readOnly,reset:editor.reset,status:editor.status,submit:editor.submit,value:editor.value};}const EMPTY=[];function ComposerEditorProvider({children,value,defaultValue=EMPTY,onValueChange,getSuggestionsAnnouncement,...options}){const[local,setLocal]=useState(defaultValue);const editor=useComposerEditor({...options,onValueChange(next,details){if(value===undefined){setLocal(next);}onValueChange?.(next,details);},value:value??local},defaultValue);return createElement(EditorContext,{value:{...editor,reset:()=>editor.reset(defaultValue)}},createElement(Suggestions,{...editor.suggestions,getSuggestionsAnnouncement},children));}const OptionsContext=createContext(null);function useComposerSuggestionsContext(){return useContext(OptionsContext);}function announcement(count){return`${count} suggestion${count===1?"":"s"} available. Use the up and down arrow keys to navigate.`;}function keyboardAllowed(event,open){return open&&!event.defaultPrevented&&!event.nativeEvent.isComposing&&event.nativeEvent.keyCode!==229;}function Suggestions({children,enabled,items,open,onOpenChange,onItemSelect,submitOnEmptySuggestions,getSuggestionsAnnouncement=announcement}){const listId=useId();const[list,registerList]=useState(null);const[mounted,setMounted]=useState(()=>new Map());const[chosen,choose]=useState();const registerItem=useCallback((id,option)=>{setMounted(old=>{const next=new Map(old);if(option){next.set(id,option);}else{next.delete(id);}return next;});},[]);const available=items.filter(item=>!item.disabled&&mounted.has(item.id)&&!mounted.get(item.id)?.disabled);const active=available.find(item=>item.id===chosen)??available[0];function close(){choose(undefined);onOpenChange(false);}function select(item){const current=available.find(candidate=>candidate.id===item.id);if(!(open&&current)){return;}onItemSelect(current);close();}function step(event,delta){event.preventDefault();const index=available.indexOf(active);const next=available[(index+delta+available.length)%available.length];if(!next){return;}choose(next.id);mounted.get(next.id)?.element.scrollIntoView({block:"nearest"});}function enter(event){if(event.shiftKey){close();return;}if(!available.length&&submitOnEmptySuggestions){return;}event.preventDefault();if(active){select(active);}}const commands={arrowdown:event=>step(event,1),arrowup:event=>step(event,-1),enter,escape(event){event.preventDefault();event.stopPropagation();close();},tab:close};const inputProps=listInputProps(enabled,open,list,active?mounted.get(active.id)?.element:undefined);return createElement(OptionsContext,{value:{highlightedId:active?.id,highlightItem:item=>choose(item.id),inputProps:{...inputProps,onKeyDown(event){if(keyboardAllowed(event,open)){commands[event.key.toLowerCase()]?.(event);}}},items,listId,registerItem,registerList,selectItem:select}},createElement(Popover.Root,{onOpenChange(next){if(!next){choose(undefined);}onOpenChange(next);},open},children,createElement("span",{"aria-atomic":true,role:"status",...stylexProps(visuallyHiddenStyles.root)},open&&list&&available.length>0?getSuggestionsAnnouncement(available.length):"")));}function listInputProps(enabled,open,list,active){return{"aria-activedescendant":open&&list?active?.id||undefined:undefined,"aria-autocomplete":enabled?"list":undefined,"aria-controls":open&&list?list.id:undefined,"aria-haspopup":enabled?"listbox":undefined};}function useComposerItem(value,disabled){const context=useComposerSuggestionsContext();const register=context?.registerItem;const id=value?.id;const ref=useCallback(element=>{if(id!==undefined){register?.(id,element?{disabled,element}:null);}},[id,register,disabled]);const highlighted=id!==undefined&&context?.highlightedId===id;return{highlighted,props:{...optionAttributes(context,id,disabled,highlighted),onClick(){if(value&&!disabled){context?.selectItem(value);}},onMouseDown(event){if(context){event.preventDefault();}},onPointerMove(){if(value&&!disabled){context?.highlightItem(value);}}},ref};}function optionAttributes(context,id,disabled,highlighted){return{"aria-disabled":disabled||undefined,"aria-selected":context?highlighted:undefined,"data-disabled":disabled?"":undefined,"data-highlighted":highlighted?"":undefined,id:context&&id!==undefined?`${context.listId}-${encodeURIComponent(id)}`:undefined,role:context?"option":undefined,tabIndex:context?-1:undefined};}// A press belongs to the draft only when no descendant owns that interaction.
+const POINTER_OWNERS=["a","button","input","select","textarea","label","summary","[contenteditable]","[data-slot='composer-input']","[role='button']","[role='combobox']","[role='menuitem']","[tabindex]:not([tabindex='-1'])"].join(",");function isFrameSurface(frame,target){if(!(target instanceof Element)){return false;}// React also bubbles presses from portalled Composer content to the frame.
+if(!frame.contains(target)){return true;}let node=target;while(node&&node!==frame){if(node.matches(POINTER_OWNERS)){return false;}node=node.parentElement;}return node===frame;}function focusComposerInput(event,preventDefault){if(event.defaultPrevented||!isFrameSurface(event.currentTarget,event.target)){return;}const draft=event.currentTarget.querySelector('[data-slot="composer-input"]');if(draft?.matches(":not(:disabled):not([aria-disabled='true'])")){if(preventDefault){event.preventDefault();}draft.focus();}}function measureLayout({input,scroll,frame}){const computed=getComputedStyle(input);const line=Number.parseFloat(computed.lineHeight)||Number.parseFloat(computed.fontSize)*1.2;const padding=Number.parseFloat(computed.paddingTop)+Number.parseFloat(computed.paddingBottom);for(const[property,value]of[["--composer-line-height",`${line}px`],["--composer-input-padding",`${padding}px`]]){if(scroll.style.getPropertyValue(property)!==value){scroll.style.setProperty(property,value);}}if(!frame){return;}frame.removeAttribute("data-multiline");if(frame.dataset.layout!=="adaptive"||!frame.querySelector('[data-slot="composer-action-group"]')){return;}const rows=Number.parseFloat(computed.getPropertyValue("--composer-min-rows"));frame.toggleAttribute("data-multiline",rows>1||intrinsicHeight(input)>line*1.5+padding);}function intrinsicHeight(input){const value=input.style.getPropertyValue("min-height");const priority=input.style.getPropertyPriority("min-height");input.style.setProperty("min-height","0px","important");const height=input.scrollHeight;if(value){input.style.setProperty("min-height",value,priority);}else{input.style.removeProperty("min-height");}return height;}function bindInputLayout(input){const scroll=input?.closest('[data-slot="composer-scroll-area"]');if(!(input&&scroll)){return;}const frame=scroll.closest('[data-slot="composer"]');const layout={frame,input,scroll};const doc=input.ownerDocument;let pending;let watched=[];function schedule(){if(pending!==undefined){return;}pending=requestAnimationFrame(()=>{pending=undefined;measure();});}const resize=new ResizeObserver(schedule);const mutations=new MutationObserver(schedule);function measure(){const groups=Array.from(frame?.querySelectorAll(':scope > [data-slot="composer-actions"] > [data-slot="composer-action-group"]')??[]);const targets=[input,...groups];if(frame){targets.push(frame);}if(!sameElements(watched,targets)){resize.disconnect();for(const target of targets){resize.observe(target);}watched=targets;}measureLayout(layout);mutations.takeRecords();}measure();if(frame){mutations.observe(frame,{attributes:true,characterData:true,childList:true,subtree:true});}input.addEventListener("input",schedule);window.addEventListener("resize",schedule);doc.fonts.addEventListener("loadingdone",schedule);return()=>{if(pending!==undefined){cancelAnimationFrame(pending);}resize.disconnect();mutations.disconnect();input.removeEventListener("input",schedule);window.removeEventListener("resize",schedule);doc.fonts.removeEventListener("loadingdone",schedule);};}function sameElements(a,b){return a.length===b.length&&a.every((element,index)=>element===b[index]);}function useComposerInputLayout(){return{inputRef:bindInputLayout};}// biome-ignore lint/performance/noBarrelFile: This module assembles the editor controller and its draft helpers.
+export{readToken as readComposerToken}from"./composer-document";export{getComposerText,useComposerFilter}from"./use-composer-editor";export{ComposerEditorProvider,focusComposerInput,useComposerContext,useComposerEditorContext,useComposerInputLayout,useComposerItem,useComposerSuggestionsContext};

package/dist/components/composer/composer-history.js

@@ -0,0 +1 @@
+import{equalValue}from"./composer-document";const GROUPABLE=new Set(["insertText","deleteContentBackward","deleteContentForward"]);function adjacent(a,b){return a?.anchor===b?.anchor&&a?.focus===b?.focus;}/** A cursor over accepted transactions. New edits truncate the redo branch. */export class ComposerHistory{entries=[];cursor=0;reset(value){this.entries=[{input:"",selection:null,time:0,value}];this.cursor=0;}matches(value){return equalValue(this.entries[this.cursor]?.value??[],value);}record(value,before,after,input){const previous=this.entries[this.cursor];if(!previous||equalValue(previous.value,value)){return;}const time=Date.now();const group=GROUPABLE.has(input)&&previous.input===input&&time-previous.time<1000&&adjacent(previous.selection,before);this.entries.length=this.cursor+1;if(group){this.entries[this.cursor]={input,selection:after,time,value};}else{previous.selection=before;this.entries.push({input,selection:after,time,value});this.cursor+=1;}if(this.entries.length>101){this.entries.shift();this.cursor-=1;}}move(direction,selection){const next=this.entries[this.cursor+direction];if(!next){return;}this.entries[this.cursor].selection=selection;this.cursor+=direction;next.input="";return next;}}

package/dist/components/composer/composer-options.d.ts

@@ -0,0 +1,45 @@
+import type { ComponentProps, RefObject } from "react";
+import type { ComposerItemValue, ComposerQuery, ComposerTrigger, ComposerValue } from "./composer-value";
+export interface ComposerChangeDetails {
+    reason: "input" | "selection" | "history" | "reset";
+}
+export interface UseComposerEditorOptions {
+    allowEmpty?: boolean;
+    disabled?: boolean;
+    onAction?: (item: ComposerItemValue, query: ComposerQuery) => void;
+    onQueryChange?: (query: ComposerQuery | null) => void;
+    onSubmit?: (value: ComposerValue) => void;
+    onValueChange: (value: ComposerValue, details: ComposerChangeDetails) => void;
+    readOnly?: boolean;
+    submitDisabled?: boolean;
+    submitOnEmptySuggestions?: boolean;
+    submitOnEnter?: "desktop" | "always" | "never";
+    triggers?: readonly ComposerTrigger[];
+    value: ComposerValue;
+}
+export interface ComposerEditorController {
+    canSubmit: boolean;
+    disabled: boolean;
+    formProps: Pick<ComponentProps<"form">, "onSubmit">;
+    inputProps: ComponentProps<"div">;
+    insertTrigger: (character: string) => void;
+    isComposing: boolean;
+    isEmpty: boolean;
+    isTextarea: boolean;
+    readOnly: boolean;
+    reset: (value?: ComposerValue) => void;
+    rootRef: RefObject<HTMLFormElement | null>;
+    status: "ready" | "loading" | "error";
+    submit: () => void;
+    suggestions: {
+        enabled: boolean;
+        submitOnEmptySuggestions: boolean;
+        items: readonly ComposerItemValue[];
+        open: boolean;
+        onOpenChange: (open: boolean) => void;
+        onItemSelect: (item: ComposerItemValue) => void;
+    };
+    syncRootRef: (root: HTMLFormElement | null) => void;
+    tokenHosts: readonly HTMLSpanElement[];
+    value: ComposerValue;
+}

package/dist/components/composer/composer-options.js

@@ -0,0 +1 @@
+export{};

package/dist/components/composer/composer-parts.d.ts

@@ -0,0 +1,36 @@
+import type { ComponentPropsWithRef, ReactNode } from "react";
+import type { Closed } from "../../closed";
+type Part<T> = Omit<Closed<T>, "children" | "data-slot">;
+export type ComposerAttachmentsProps = Part<ComponentPropsWithRef<"ul">> & {
+    "aria-label"?: string;
+    children: ReactNode;
+};
+/** The tray of files above the composer input. */
+export declare function ComposerAttachments({ "aria-label": ariaLabel, children, ref, ...rest }: ComposerAttachmentsProps): import("react").JSX.Element;
+export type ComposerAttachmentProps = Part<ComponentPropsWithRef<"li">> & {
+    /** Opens the file in a new tab. */
+    href?: string;
+    name: string;
+    /** Opens the file in place, such as an image in a Lightbox. */
+    onOpen?: () => void;
+    onRemove?: () => void;
+    /** An image URL; files without one show their extension. */
+    preview?: string;
+    /** Upload share from 0 to 100; the tile dims until it reaches 100. */
+    progress?: number;
+};
+/** One file in the tray: a 56px tile with a thumbnail or the file's type. */
+export declare function ComposerAttachment({ href, name, onOpen, onRemove, preview, progress, ref, ...rest }: ComposerAttachmentProps): import("react").JSX.Element;
+export type ComposerStatusBarProps = Part<ComponentPropsWithRef<"div">> & {
+    children: ReactNode;
+};
+/** A quiet row under the composer: where the agent works and how much room is left. */
+export declare function ComposerStatusBar({ children, ref, ...rest }: ComposerStatusBarProps): import("react").JSX.Element;
+export type ComposerStatusBarGroupProps = ComposerStatusBarProps;
+export declare function ComposerStatusBarGroup({ children, ref, ...rest }: ComposerStatusBarGroupProps): import("react").JSX.Element;
+export type ComposerStatusItemProps = Part<ComponentPropsWithRef<"button">> & {
+    children: ReactNode;
+};
+/** One fact in the status bar, such as the branch; it can open a menu. */
+export declare function ComposerStatusItem({ children, ref, type, ...rest }: ComposerStatusItemProps): import("react").JSX.Element;
+export {};

package/dist/components/composer/composer-parts.js

@@ -0,0 +1,4 @@
+import{props}from"@stylexjs/stylex";import{IconFile,IconX}from"../../icons";import{typeRoles}from"../../styles/typography.styles";import{VisuallyHidden}from"../visually-hidden/visually-hidden";import{attachmentMarker}from"./attachment-marker.stylex";import{composerPartStyles as styles}from"./composer-parts.styles";import{ProgressRing}from"./composer-progress-ring";import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";/** The tray of files above the composer input. */export function ComposerAttachments({"aria-label":ariaLabel="Attachments",children,ref,...rest}){return/*#__PURE__*/_jsx("ul",{...rest,"aria-label":ariaLabel,"data-slot":"composer-attachments",ref:ref,...props(styles.attachments),children:children});}function extensionOf(name){const dot=name.lastIndexOf(".");return dot>0?name.slice(dot+1,dot+5):"file";}function RemoveButton({name,onRemove}){if(!onRemove){return null;}return/*#__PURE__*/_jsx("button",{"aria-label":`Remove ${name}`,onClick:onRemove,type:"button",...props(styles.attachmentRemove),children:/*#__PURE__*/_jsx(IconX,{"aria-hidden":"true",size:14,stroke:2.25})});}// Covers the tile, so the whole tile opens the file. Remove stays above it.
+function OpenTarget({href,label,onOpen}){if(onOpen){return/*#__PURE__*/_jsx("button",{"data-slot":"composer-attachment-open",onClick:onOpen,type:"button",...props(styles.attachmentOpen),children:/*#__PURE__*/_jsx(VisuallyHidden,{children:label})});}if(href){return/*#__PURE__*/_jsx("a",{"data-slot":"composer-attachment-open",href:href,rel:"noopener noreferrer",target:"_blank",...props(styles.attachmentOpen),children:/*#__PURE__*/_jsxs(VisuallyHidden,{children:[label,", opens in a new tab"]})});}return/*#__PURE__*/_jsx(VisuallyHidden,{children:label});}// A file shows its glyph and type; while uploading, a ring and its share.
+function FileFace({name,progress}){const uploading=progress!==undefined&&progress<100;return/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx("span",{"aria-hidden":"true",...props(styles.attachmentGlyph),children:uploading?/*#__PURE__*/_jsx(ProgressRing,{share:progress/100}):/*#__PURE__*/_jsx(IconFile,{size:16,stroke:1.75})}),/*#__PURE__*/_jsx("span",{"aria-hidden":"true",...props(styles.attachmentMeta),children:uploading?`${Math.round(progress)}%`:extensionOf(name).toUpperCase()})]});}/** One file in the tray: a 56px tile with a thumbnail or the file's type. */export function ComposerAttachment({href,name,onOpen,onRemove,preview,progress,ref,...rest}){const uploading=progress!==undefined&&progress<100;const label=uploading?`${name}, uploading ${Math.round(progress)}%`:name;return/*#__PURE__*/_jsxs("li",{...rest,"data-slot":"composer-attachment",ref:ref,title:name,...props(attachmentMarker,styles.attachment,Boolean(href||onOpen)&&styles.attachmentOpenable),children:[preview?/*#__PURE__*/// biome-ignore lint/performance/noImgElement: Keep this UI component framework-neutral instead of coupling it to Next.js image optimization.
+_jsx("img",{alt:"",height:56,src:preview,width:56,...props(styles.attachmentImage)}):/*#__PURE__*/_jsx(FileFace,{name:name,progress:progress}),/*#__PURE__*/_jsx(OpenTarget,{href:href,label:label,onOpen:onOpen}),/*#__PURE__*/_jsx(RemoveButton,{name:name,onRemove:onRemove})]});}/** A quiet row under the composer: where the agent works and how much room is left. */export function ComposerStatusBar({children,ref,...rest}){return/*#__PURE__*/_jsx("div",{...rest,"data-slot":"composer-status-bar",ref:ref,...props(styles.statusBar,typeRoles.ui),children:children});}export function ComposerStatusBarGroup({children,ref,...rest}){return/*#__PURE__*/_jsx("div",{...rest,"data-slot":"composer-status-bar-group",ref:ref,...props(styles.statusBarGroup),children:children});}/** One fact in the status bar, such as the branch; it can open a menu. */export function ComposerStatusItem({children,ref,type="button",...rest}){return/*#__PURE__*/_jsx("button",{...rest,"data-slot":"composer-status-item",ref:ref,type:type,...props(styles.statusItem),children:children});}

package/dist/components/composer/composer-parts.styles.js

@@ -0,0 +1,4 @@
+import{create,keyframes,when}from"@stylexjs/stylex";import"../../styles/colors.stylex";import{colors}from"../../styles/colors.stylex";import"../../styles/conditions.stylex";import{conditions}from"../../styles/conditions.stylex";import"../../styles/dimensions.stylex";import{controlSize,glyphSize}from"../../styles/dimensions.stylex";import"../../styles/interaction.stylex";import{borderWidth}from"../../styles/interaction.stylex";import"../../styles/motion.stylex";import{duration,easing}from"../../styles/motion.stylex";import"../../styles/shape.stylex";import{shape}from"../../styles/shape.stylex";import"../../styles/spacing.stylex";import{space}from"../../styles/spacing.stylex";import"../../styles/typography.stylex";import{fontSize,fontWeight,lineHeight}from"../../styles/typography.stylex";import"./attachment-marker.stylex";import{attachmentMarker}from"./attachment-marker.stylex";// The light's angle around the composer: one slow lap.
+const lap="x10pjk1s-B";// The recording ring grows a little and fades, then comes back.
+const breathe="xbgr7u9-B";const WORKING=":is([data-working] > *)";// The bands sit deeper, inside the glow's rings.
+const WORKING_BAND=":is([data-working] *)";export const composerPartStyles={attachment:{kVAM5u:"x155xxfk",kaIpWk:"x2b34ud",ksu8eU:"x1y0btm7",kMzoRj:"x1cdonsl",kB7OPa:"x9f619",kMwMTN:"x125omll",k1xSpc:"x78zum5",kXwgrk:"xdt5ytf",kmuXW:"x2lah0s",kZKoxP:"xvx1h12",kjj79g:"x1qughib",kmVPX3:"x1btfdvn",kVAEAm:"x1n2onr6",kzqmXN:"x68t8f4",$$css:true},attachmentGlyph:{k1xSpc:"x78zum5",kZKoxP:"x1a05dn3",kzqmXN:"xmpb2e4",$$css:true},attachmentImage:{kaIpWk:"x1am189j",k1xSpc:"x1lliihq",kZKoxP:"x5yr21d",kpwlN0:"x10a8y8t",kVIFPx:"xl1xv1r",kVAEAm:"x10l6tqk",kzqmXN:"xh8yej3",$$css:true},attachmentMeta:{kGuDYH:"x1ws78te",kcqcaj:"xss6m8b",k63SB2:"xuku2lm",kLWn49:"x76y1r9",$$css:true},attachmentOpen:{kysU6D:"xjyslct",kWkggS:"xjbqb8w",kaIpWk:"x1am189j",kMzoRj:"xc342km",kkrTdU:"x1ypdohk",kpwlN0:"x10a8y8t",kjBf7l:"x4dprnk x1uczgqu",kInvED:"x4jx5dk",k3XXqK:"x9v5kkp x1t137rt",kMeerF:"x1vhx2qj",kmVPX3:"x1717udv",kVAEAm:"x10l6tqk",$$css:true},attachmentOpenable:{kVAM5u:"xgshqkf x155xxfk",$$css:true},attachmentRemove:{kGNEyG:"x6s0dn4",k6WDB:"xpivpjv",kWkggS:"xwdq16j",kaIpWk:"x16rqkct",kMzoRj:"xc342km",kMwMTN:"xzr6qem x125omll",kkrTdU:"x1ypdohk",k1xSpc:"x3nfvp2",kZKoxP:"xud2w1",k87sOh:"x1v5m63d",kt4wiu:"x1vld3ni",kjj79g:"xl56j7k",kSiTet:"x9nm1xz x10usv9n x1s37bwl x1hc1fzr",kjBf7l:"x4dprnk x1uczgqu",kInvED:"x1wfwxd8",k3XXqK:"xaatb59",kMeerF:"x1vhx2qj",kmVPX3:"x1717udv",kVAEAm:"x10l6tqk",kIyJzY:"x1e471i8 x1j5v3x2",k1ekBW:"x1mz1wvm",kAMwcw:"xvhdtae",kzqmXN:"x1sxroq0",$$css:true},attachments:{k1xSpc:"x78zum5",kwnvtZ:"x1a02dak",kOIVth:"xp4ho6d",kB88ic:"xe8uvvx",kogj98:"x1ghz6dp",kLKAdn:"xvdlrvc",kg3NbH:"xb5xqfq",$$css:true},contextCard:{k1xSpc:"x78zum5",kXwgrk:"xdt5ytf",kOIVth:"xiw8qbs",kzqmXN:"x1e67fm3",ks0D6T:"x193iq5w",$$css:true},contextCost:{kMwMTN:"x125omll",$$css:true},contextLabel:{kMwMTN:"x125omll",$$css:true},contextRow:{kGNEyG:"x1pha0wt",k1xSpc:"x78zum5",kOIVth:"xiw8qbs",kjj79g:"x1qughib",$$css:true},contextRows:{k1xSpc:"x78zum5",kXwgrk:"xdt5ytf",kOIVth:"x13hh4mm",kogj98:"x1ghz6dp",$$css:true},contextTitle:{k63SB2:"xuku2lm",$$css:true},contextTotal:{kLZC3w:"xcadu6e",kPef9Z:"x13fuv20",kEafiO:"x1vfp6xi",k63SB2:"xuku2lm",kLKAdn:"xyfr97a",$$css:true},contextValue:{kcqcaj:"xss6m8b",kogj98:"x1ghz6dp",khDVqt:"xuxw1ft",$$css:true},dictation:{kdFwpH:"xhktotb",kh3gPk:"x1ret9bn",kVUETb:"x13ee8us",kFguJn:"ximzmp x10dsxo9 xlkbn08",kYqdJW:"x1mb4bye",kXtpa:"x1npql3u",kUfP38:"x2coff9",kbwMcY:"x86avzo",kPGmMm:"x1lewlws",k5JduY:"x1s928wv",kv0HGH:"x16gvljb",kypkao:"xlu6zno xmf22ne",kwXMNM:"x1j6awrg",kMwMTN:"xhifqdv",k1xSpc:"x78zum5",kVAEAm:"x1n2onr6",$$css:true},glow:{kpwlN0:"x10a8y8t",kSiTet:"xgqk1za xg01cxk",kfzvcC:"x47corl",kVAEAm:"x10l6tqk",kIyJzY:"x1e471i8 x18kz1lc",k1ekBW:"x19991ni",$$css:true},glowBand:{k44tkh:"xeaay5l",ko0y90:"xa4qsjk",kKVMdj:"x1tzfbnl x1qsy7q1",k5bvn2:"x1hkdb0d xorstpt",kyAemX:"x1esw782",kOBAk4:"x1plog1",kKwaWg:"x14nz3uv xhbf78z",k87sOh:"xwa60dl",kLqNvP:"xbudbmw",kVAEAm:"x10l6tqk",k3aq6I:"x11lhmoz",kzqmXN:"xw90zxv",$$css:true},glowBloom:{ku685b:"xj2j9hd",kpwlN0:"x10a8y8t",kSiTet:"x197sbye",kVAEAm:"x10l6tqk",$$css:true},glowRing:{kaIpWk:"x63lw5n",kpwlN0:"x10a8y8t",kSYUrQ:"x13bagxo",kQB4zb:"x19wp0b7",kX1K2I:"x1d20nd",kVQacm:"xb3r6kr",kmVPX3:"x1i3ajwb",kVAEAm:"x10l6tqk",$$css:true},meter:{kmuXW:"x2lah0s",kcqcaj:"xss6m8b",$$css:true},picker:{kGNEyG:"x6s0dn4",kysU6D:"xjyslct",kWkggS:"x1225k3z xxsa5ao x12ribo7 xjbqb8w",kaIpWk:"x2b34ud",kMzoRj:"xc342km",kMwMTN:"x1x6ed8x xzr6qem x16j0kd1 x125omll",kkrTdU:"x1ypdohk",k1xSpc:"x3nfvp2",kMv6JI:"xjb2p0i",kOIVth:"x13hh4mm",ks0D6T:"x193iq5w",kAzted:"x1vigsvi",k7Eaqz:"xeuugli",kjBf7l:"x4dprnk x1uczgqu",kInvED:"x1wfwxd8",k3XXqK:"xaatb59",kMeerF:"x1vhx2qj",kg3NbH:"xb5xqfq",kIyJzY:"x1e471i8 x1j5v3x2",k1ekBW:"xs2xxs2",khDVqt:"xuxw1ft",$$css:true},pickerChevron:{kmuXW:"x2lah0s",$$css:true},pickerChoice:{k7Eaqz:"xeuugli",kVQacm:"xb3r6kr",kg5iWk:"xlyipyv",$$css:true},pickerDescription:{kMwMTN:"x125omll",$$css:true},pickerEffort:{kGNEyG:"x6s0dn4",kWkggS:"x1o7hn9x",kaIpWk:"xvozwe9",kMwMTN:"x125omll",k1xSpc:"x3nfvp2",kmuXW:"x2lah0s",kOIVth:"x195vfkc",kwRFfy:"x1a7jdvm",kZCmMZ:"xt0na8i",khDVqt:"xuxw1ft",$$css:true},pickerEffortChevron:{k3aq6I:"x19axjrm x1c071of",$$css:true},pickerFirstLine:{kSGwAc:"xqcrz7y",keoZOQ:"xr9ek0c",$$css:true},pickerHeader:{kGNEyG:"x6s0dn4",k1xSpc:"x78zum5",kOIVth:"xp4ho6d",kjj79g:"x1qughib",kAzted:"xvfbv0m",kZCmMZ:"xt0na8i",$$css:true},pickerIcon:{k1xSpc:"x78zum5",kmuXW:"x2lah0s",$$css:true},pickerLearnMore:{kaIpWk:"xvozwe9",kMwMTN:"xzr6qem x9gkq5x x125omll",kkrTdU:"x1ypdohk",kGuDYH:"x1ws78te",kLWn49:"x76y1r9",kjBf7l:"x4dprnk x1uczgqu",k3XXqK:"xaatb59",kMeerF:"x1vhx2qj",k8WAf4:"x1lmimt7",kg3NbH:"xb5xqfq",kybGjl:"x1hl2dhg",kIyJzY:"x1e471i8 x1j5v3x2",k1ekBW:"xt3l3uh",$$css:true},pickerOption:{k1xSpc:"x78zum5",kXwgrk:"xdt5ytf",kzQI83:"x1iyjqo2",kOIVth:"x195vfkc",k7Eaqz:"xeuugli",$$css:true},pickerRadio:{kGNEyG:"x6s0dn4",kSGwAc:"xqcrz7y",k1xSpc:"x3nfvp2",kmuXW:"x2lah0s",kjj79g:"xl56j7k",keoZOQ:"xr9ek0c",$$css:true},pickerRadioDot:{kSiTet:"xvyzedd xg01cxk",$$css:true},pickerTitle:{kMwMTN:"x125omll",kGuDYH:"x1ws78te",k63SB2:"xuku2lm",kLWn49:"x76y1r9",$$css:true},pickerTriggerEffort:{kMwMTN:"x125omll",$$css:true},statusBar:{kGNEyG:"x7a106z",kMwMTN:"x125omll",k1xSpc:"x78zum5",kOIVth:"xp4ho6d",kjj79g:"x1qughib",k7Eaqz:"xeuugli",kg3NbH:"xy7odpl",$$css:true},statusBarGroup:{kGNEyG:"x6s0dn4",k1xSpc:"x78zum5",kwnvtZ:"x1a02dak",kOIVth:"xiw8qbs",k7Eaqz:"xeuugli",$$css:true},statusItem:{kGNEyG:"x6s0dn4",kWkggS:"xjbqb8w",kaIpWk:"xvozwe9",kMzoRj:"xc342km",kMwMTN:"xzr6qem x1x6ed8x x125omll",kkrTdU:"x1ypdohk",k1xSpc:"x3nfvp2",kMv6JI:"xjb2p0i",kGuDYH:"x1qlqyl8",k63SB2:"x1lo1l87",kOIVth:"x13hh4mm",kLWn49:"x15bjb6t",kUOVxO:"xonvl67",kAzted:"xvfbv0m",kjBf7l:"x4dprnk x1uczgqu",kInvED:"x1wfwxd8",k3XXqK:"xaatb59",kMeerF:"x1vhx2qj",k8WAf4:"xt970qd",kg3NbH:"xdbhxi8",kIyJzY:"x1e471i8 x1j5v3x2",k1ekBW:"xt3l3uh",kAMwcw:"xvhdtae",khDVqt:"xuxw1ft",$$css:true}};

package/dist/components/composer/composer-picker.d.ts

@@ -0,0 +1,50 @@
+import { type ReactNode } from "react";
+/** A level of reasoning effort, such as "High". */
+export interface ComposerPickerEffort {
+    description?: string;
+    label: string;
+    value: string;
+}
+export interface ComposerPickerOption<Value extends string = string> {
+    /** One line on what choosing it means, shown in the menu. */
+    description?: string;
+    /**
+     * The effort levels this option offers, as the model's API names them.
+     * Once chosen, its row opens them to the side.
+     */
+    efforts?: readonly ComposerPickerEffort[];
+    /**
+     * A heading the option sits under, such as its provider. Options that
+     * share a heading are listed together, in the order they first appear.
+     */
+    group?: string;
+    /** A glyph before the label, in the menu and on the trigger once chosen. */
+    icon?: ReactNode;
+    label: string;
+    value: Value;
+}
+export interface ComposerPickerProps<Value extends string = string> {
+    /**
+     * The chosen effort level. When the chosen option has none by this
+     * value, such as after switching models, the trigger leaves it out.
+     */
+    effort?: string;
+    /** A glyph for choices that have none of their own. */
+    icon?: ReactNode;
+    /** What is picked, such as "Model". It names the menu and the trigger. */
+    label: string;
+    /** Adds a "Learn more" link beside the menu's title. */
+    learnMoreHref?: string;
+    /** Called with a level from the chosen option's `efforts`. */
+    onEffortChange?: (effort: string) => void;
+    onValueChange: (value: Value) => void;
+    options: readonly ComposerPickerOption<Value>[];
+    value: Value;
+}
+/**
+ * A choice in the composer's toolbar, such as the model or the permission
+ * mode: a quiet label that opens a menu of options, each with a line on
+ * what it means. Options can carry icons, sit under headings such as their
+ * provider, and offer effort levels that open from the chosen row.
+ */
+export declare function ComposerPicker<Value extends string = string>({ effort, icon, label, learnMoreHref, onEffortChange, onValueChange, options, value, }: ComposerPickerProps<Value>): import("react").JSX.Element;

package/dist/components/composer/composer-picker.js

@@ -0,0 +1,15 @@
+"use client";import{props}from"@stylexjs/stylex";import{useCallback}from"react";import{IconChevronDown,IconChevronRight}from"../../icons";import{typeRoles}from"../../styles/typography.styles";import{checkboxStyles}from"../checkbox/checkbox.styles";import{Menu,MenuGroup,MenuGroupLabel,MenuPopup,MenuPrimitive,MenuRadioGroup,MenuSeparator,MenuSubPopup,MenuTrigger}from"../menu/menu";import{menuStyles}from"../menu/menu.styles";import{radioStyles}from"../radio/radio.styles";import{VisuallyHidden}from"../visually-hidden/visually-hidden";import{composerPartStyles as styles}from"./composer-parts.styles";/** A level of reasoning effort, such as "High". */import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";function sectionsOf(options){const sections=new Map();for(const option of options){const section=sections.get(option.group)??{group:option.group,options:[]};section.options.push(option);sections.set(option.group,section);}return[...sections.values()];}function Glyph({children,inMenu=false}){if(!children){return null;}return/*#__PURE__*/_jsx("span",{"aria-hidden":"true",...props(styles.pickerIcon,inMenu&&styles.pickerFirstLine),children:children});}// A radio circle, filled when chosen. A row that is not a radio item, such
+// as the chosen model that opens its effort levels, draws a static one.
+function RadioMark({checked}){return/*#__PURE__*/_jsx("span",{"aria-hidden":"true","data-checked":checked?"":undefined,...props(checkboxStyles.base,checkboxStyles.forcedColorsSelected,radioStyles.root,radioStyles.sizeSm,styles.pickerRadio),children:/*#__PURE__*/_jsx("span",{...props(radioStyles.indicator,styles.pickerRadioDot)})});}function OptionBody({description,icon,label}){return/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(Glyph,{inMenu:true,children:icon}),/*#__PURE__*/_jsxs("span",{...props(styles.pickerOption),children:[/*#__PURE__*/_jsx("span",{children:label}),description?/*#__PURE__*/_jsx("span",{...props(typeRoles.caption,styles.pickerDescription),children:description}):null]})]});}// One choice. The form Radio's circle sits at the row's end, so labels and
+// icons line up on the leading edge.
+function Option({option}){return/*#__PURE__*/_jsxs(MenuPrimitive.RadioItem,{closeOnClick:true,"data-slot":"menu-radio-item",value:option.value,...props(menuStyles.item,menuStyles.itemDefault),children:[/*#__PURE__*/_jsx(OptionBody,{description:option.description,icon:option.icon,label:option.label}),/*#__PURE__*/_jsx(MenuPrimitive.RadioItemIndicator,{keepMounted:true,...props(checkboxStyles.base,checkboxStyles.forcedColorsSelected,radioStyles.root,radioStyles.sizeSm,styles.pickerRadio),children:/*#__PURE__*/_jsx("span",{...props(radioStyles.indicator,styles.pickerRadioDot)})})]});}// The chosen option, when it has effort levels: its row shows the current
+// level and opens the list of levels to the side.
+function EffortRow({effort,onEffortChange,option}){const levels=option.efforts??[];const current=levels.find(level=>level.value===effort);const change=useCallback(next=>onEffortChange(next),[onEffortChange]);return/*#__PURE__*/_jsxs(MenuPrimitive.SubmenuRoot,{children:[/*#__PURE__*/_jsxs(MenuPrimitive.SubmenuTrigger,{"data-slot":"composer-picker-effort",...props(menuStyles.item,menuStyles.itemDefault,menuStyles.subTrigger),children:[/*#__PURE__*/_jsx(OptionBody,{description:option.description,icon:option.icon,label:option.label}),/*#__PURE__*/_jsx(VisuallyHidden,{children:", chosen, effort"}),/*#__PURE__*/_jsxs("span",{...props(typeRoles.caption,styles.pickerEffort),children:[current?.label??"Effort",/*#__PURE__*/_jsx(IconChevronRight,{"aria-hidden":"true",size:12,...props(styles.pickerEffortChevron)})]}),/*#__PURE__*/_jsx(RadioMark,{checked:true})]}),/*#__PURE__*/_jsx(MenuSubPopup,{children:/*#__PURE__*/_jsxs(MenuGroup,{children:[/*#__PURE__*/_jsx(MenuGroupLabel,{children:"Effort"}),/*#__PURE__*/_jsx(MenuRadioGroup,{"aria-label":"Effort",onValueChange:change,value:effort,children:levels.map(level=>/*#__PURE__*/_jsx(Option,{option:level},level.value))})]})})]});}function Header({href,label}){return/*#__PURE__*/_jsxs("div",{...props(styles.pickerHeader),children:[/*#__PURE__*/_jsx("span",{"aria-hidden":"true",...props(styles.pickerTitle),children:label}),href?/*#__PURE__*/_jsx(MenuPrimitive.LinkItem,{href:href,...props(styles.pickerLearnMore),children:"Learn more"}):null]});}// The trigger's text: the choice, and its effort level when it has one.
+function TriggerLabel({chosen,effort,label,value}){const level=chosen?.efforts?.find(item=>item.value===effort);return/*#__PURE__*/_jsxs("span",{...props(styles.pickerChoice),children:[/*#__PURE__*/_jsxs(VisuallyHidden,{children:[label,": "]}),chosen?.label??value,level?/*#__PURE__*/_jsxs("span",{...props(styles.pickerTriggerEffort),children:[" · ",level.label]}):null]});}function Row({effort,onEffortChange,option,value}){if(option.value===value&&option.efforts?.length&&onEffortChange){return/*#__PURE__*/_jsx(EffortRow,{effort:effort,onEffortChange:onEffortChange,option:option});}return/*#__PURE__*/_jsx(Option,{option:option});}/**
+ * A choice in the composer's toolbar, such as the model or the permission
+ * mode: a quiet label that opens a menu of options, each with a line on
+ * what it means. Options can carry icons, sit under headings such as their
+ * provider, and offer effort levels that open from the chosen row.
+ */export function ComposerPicker({effort,icon,label,learnMoreHref,onEffortChange,onValueChange,options,value}){const chosen=options.find(option=>option.value===value);const sections=sectionsOf(options);// Provider headings already title a grouped list; a second title above
+// them is noise unless it carries the link.
+const titled=learnMoreHref!==undefined||sections[0]?.group===undefined;const change=useCallback(next=>onValueChange(next),[onValueChange]);return/*#__PURE__*/_jsxs(Menu,{children:[/*#__PURE__*/_jsxs(MenuTrigger,{render:/*#__PURE__*/_jsx("button",{"data-slot":"composer-picker",type:"button",...props(typeRoles.ui,styles.picker)}),children:[/*#__PURE__*/_jsx(Glyph,{children:chosen?.icon??icon}),/*#__PURE__*/_jsx(TriggerLabel,{chosen:chosen,effort:effort,label:label,value:value}),/*#__PURE__*/_jsx(IconChevronDown,{"aria-hidden":"true",size:14,...props(styles.pickerChevron)})]}),/*#__PURE__*/_jsxs(MenuPopup,{align:"start",side:"top",children:[titled?/*#__PURE__*/_jsx(Header,{href:learnMoreHref,label:label}):null,/*#__PURE__*/_jsx(MenuRadioGroup,{"aria-label":label,onValueChange:change,value:value,children:sections.map((section,index)=>/*#__PURE__*/_jsxs(MenuGroup,{children:[index>0?/*#__PURE__*/_jsx(MenuSeparator,{}):null,section.group?/*#__PURE__*/_jsx(MenuGroupLabel,{children:section.group}):null,section.options.map(option=>/*#__PURE__*/_jsx(Row,{effort:effort,onEffortChange:onEffortChange,option:option,value:value},option.value))]},section.group??""))})]})]});}

package/dist/components/composer/composer-progress-ring.js

@@ -0,0 +1 @@
+import{create,props}from"@stylexjs/stylex";import"../../styles/colors.stylex";import{colors}from"../../styles/colors.stylex";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const RADIUS=6;const LENGTH=2*Math.PI*RADIUS;/** A 16px ring showing a 0–1 share; decorative, so pair it with text. */export function ProgressRing({share}){const done=Math.min(Math.max(share,0),1)*LENGTH;return/*#__PURE__*/_jsxs("svg",{"aria-hidden":"true",height:"16",viewBox:"0 0 16 16",width:"16",...{className:"x1lliihq x2lah0s x9tu13d"},children:[/*#__PURE__*/_jsx("circle",{cx:"8",cy:"8",fill:"none",r:RADIUS,strokeWidth:"2",...{className:"x120t28g"}}),/*#__PURE__*/_jsx("circle",{cx:"8",cy:"8",fill:"none",r:RADIUS,strokeDasharray:`${done} ${LENGTH}`,strokeLinecap:"round",strokeWidth:"2",...{className:"x1tsy410"}})]});}

package/dist/components/composer/composer-query.js

@@ -0,0 +1 @@
+const SPACES=/\p{Zs}+/gu;const WORD=/^[\p{L}\p{M}\p{N}_.’'-]$/u;const SPACE=/^\p{Zs}$/u;const BOUNDARY=/\s/u;/** Find the nearest trigger, then scan the query without crossing punctuation. */export function getComposerQuery(text,caret,triggers){const candidates=triggers.filter(character=>character.length>0&&character.length<=caret).map(character=>({character,start:text.lastIndexOf(character,caret-character.length)})).sort((a,b)=>b.start-a.start);const[match]=candidates;if(!match||match.start<0){return null;}if(match.start>0&&!BOUNDARY.test(text.charAt(match.start-1))){return null;}const prefix=text.slice(match.start+match.character.length,caret);if(SPACE.test(Array.from(prefix)[0]??"")){return null;}if(!Array.from(prefix).every(letter=>WORD.test(letter)||SPACE.test(letter))){return null;}let end=caret;for(const letter of text.slice(caret)){if(!WORD.test(letter)){break;}end+=letter.length;}return{...match,end,text:text.slice(match.start+match.character.length,end).replace(SPACES," ").trim()};}

package/dist/components/composer/composer-scroll-area.js

@@ -0,0 +1 @@
+import{ScrollArea}from"@base-ui/react/scroll-area";import{presentation}from"./composer.styles";/** Closed scroll regions: Base UI owns measurement and scrollbar lifetimes. */import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";export function ComposerScrollArea({children,region}){const draft=region==="draft";return/*#__PURE__*/_jsxs(ScrollArea.Root,{...presentation(draft?"scroll":"listScroll"),"data-slot":draft?"composer-scroll-area":"composer-suggestions-scroll",children:[/*#__PURE__*/_jsx(ScrollArea.Viewport,{"data-slot":"composer-viewport",children:/*#__PURE__*/_jsx(ScrollArea.Content,{"data-slot":"composer-content",children:children})}),/*#__PURE__*/_jsx(ScrollArea.Scrollbar,{...presentation("scrollbar"),children:/*#__PURE__*/_jsx(ScrollArea.Thumb,{...presentation("thumb")})})]});}

package/dist/components/composer/composer-session.js

@@ -0,0 +1,3 @@
+import{flushSync}from"react-dom";import{COMPOSER_CLIPBOARD_TYPE,parseComposerClipboard}from"./composer-clipboard";import{currentQuery,editorRange,equalValue,getComposerText,insertItem,insertPlainText,queryRange,readSelection,readValue,replaceRange,restoreSelection,writeValue}from"./composer-document";import{ComposerHistory}from"./composer-history";const SPACE=/\s/u;const INITIAL={composing:false,hosts:[],query:null,textarea:false};function plain(value){const text=getComposerText(value);return text?[{text,type:"text"}]:[];}function sameHosts(a,b){return a.length===b.length&&a.every((host,i)=>host===b[i]);}function ignoreKey(event,composing){return event.defaultPrevented||composing||event.nativeEvent.isComposing||event.nativeEvent.keyCode===229;}function undoDirection(event){if(event.altKey||!(event.metaKey||event.ctrlKey)){return 0;}if(event.key.toLowerCase()==="z"){return event.shiftKey?1:-1;}return event.ctrlKey&&event.key.toLowerCase()==="y"?1:0;}const getServerSnapshot=()=>INITIAL;/** Transient editing state belongs to the mounted input; values belong to React. */export class ComposerSession{options;input=null;view=INITIAL;observers=new Set();history=new ComposerHistory();before=null;inputType="";savedSelection=null;dismissed=null;compositionOwner=[];compositionInput=null;finishingComposition=false;resetValue=[];rootRef={current:null};constructor(options){this.options=options;this.history.reset(options.value);}getSnapshot=()=>this.view;getServerSnapshot=getServerSnapshot;subscribe=notify=>{this.observers.add(notify);return()=>{this.observers.delete(notify);};};update(patch){if(Object.entries(patch).every(([key,value])=>this.view[key]===value)){return;}this.view={...this.view,...patch};for(const notify of this.observers){notify();}}commit(options,resetValue){this.options=options;this.resetValue=resetValue;this.reconcile();}bind=input=>{if(!input){return;}this.input=input;const composing=this.view.composing&&this.compositionInput===input;if(!composing){this.compositionInput=null;}this.update({composing,textarea:input.tagName==="TEXTAREA"});this.reconcile();const doc=input.ownerDocument;doc.addEventListener("selectionchange",this.selectionChanged);doc.addEventListener("beforeinput",this.beforeInput);return()=>{doc.removeEventListener("selectionchange",this.selectionChanged);doc.removeEventListener("beforeinput",this.beforeInput);this.input=null;queueMicrotask(()=>{if(!this.input){this.compositionInput=null;this.setQuery(null);this.update({composing:false,hosts:[]});}});};};bindRoot(root){this.rootRef.current=root;const form=root.tagName==="FORM"?root:root.closest("form");const boundary=root.getRootNode();const reset=event=>{if(event.target!==form){return;}queueMicrotask(()=>{if(this.rootRef.current===root&&!event.defaultPrevented){this.reset(this.resetValue);}});};boundary.addEventListener("reset",reset);return()=>{boundary.removeEventListener("reset",reset);if(this.rootRef.current===root){this.rootRef.current=null;}};}editable(){return!(this.options.disabled||this.options.readOnly||this.view.composing);}rich(){return this.view.textarea?null:this.input;}reconcile(){const{input}=this;if(!input||this.view.composing){return;}const owned=this.view.textarea?plain(this.options.value):this.options.value;if(!this.history.matches(owned)){this.history.reset(owned);this.savedSelection=null;}if(!equalValue(readValue(input),owned)){const selection=readSelection(input);writeValue(input,owned);restoreSelection(input,selection);this.setQuery(null);this.dismissed=null;}if(!this.queryEnabled()){this.setQuery(null);}this.collectHosts(input);}queryEnabled(){return this.editable()&&!!this.options.triggers?.some(({character})=>character===this.view.query?.character);}collectHosts(input){const hosts=Array.from(input.querySelectorAll('[data-slot="composer-token-renderer"]'));for(const host of hosts){const fallback=host.previousElementSibling;if(fallback instanceof HTMLElement){fallback.hidden=true;}}if(!sameHosts(hosts,this.view.hosts)){this.update({hosts});}}setQuery(query){if(query?.key===this.view.query?.key&&query?.node===this.view.query?.node){return;}this.update({query});this.options.onQueryChange?.(query?{character:query.character,key:query.key,text:query.text}:null);}refreshQuery=()=>{const input=this.rich();const active=input&&this.editable()&&input.ownerDocument.activeElement===input;const query=active?currentQuery(input,this.options.triggers??[]):null;if(query?.key!==this.dismissed){this.dismissed=null;}this.setQuery(query?.key===this.dismissed?null:query);};selectionChanged=()=>{const{input}=this;if(!input||input.ownerDocument.activeElement!==input||this.view.composing){return;}this.savedSelection=readSelection(input);this.refreshQuery();};dismiss=()=>{this.dismissed=this.view.query?.key??null;this.setQuery(null);};blur=()=>{if(this.input){this.savedSelection=readSelection(this.input)??this.savedSelection;}this.dismiss();};prepare(type){this.before=this.input?readSelection(this.input):null;this.inputType=type;}beforeInput=event=>{const{input}=this;if(!(event instanceof InputEvent)||event.defaultPrevented||!eventInInput(input,event)){return;}if(blockedInput(this.options,event)){event.preventDefault();return;}if(this.view.textarea){return;}const direction={historyRedo:1,historyUndo:-1}[event.inputType];if(direction){event.preventDefault();this.travel(direction);}else if(!this.view.composing){this.prepare(event.inputType);}};publish(reason="input"){const{input}=this;if(!(input&&this.editable())){return;}const value=readValue(input);if(!this.view.textarea){this.history.record(value,this.before,readSelection(input),this.inputType);}this.inputType="";this.before=null;if(!equalValue(value,this.options.value)){flushSync(()=>this.options.onValueChange(value,{reason}));}this.reconcile();this.dismissed=null;this.refreshQuery();}inputChanged=()=>{if(Boolean(this.finishingComposition)===false){this.publish();}};startComposition=()=>{this.prepare("composition");this.compositionOwner=this.options.value;this.compositionInput=this.input;this.update({composing:true});this.setQuery(null);};endComposition=()=>{this.compositionInput=null;this.update({composing:false});this.finishingComposition=true;queueMicrotask(()=>{this.finishingComposition=false;});if(equalValue(this.compositionOwner,this.options.value)){this.publish();}else{this.reconcile();}};select=item=>{const input=this.rich();const{query}=this.view;if(!(input&&query&&this.editable())||item.disabled||!input.contains(query.node)){return;}this.prepare("selection");if(item.type==="action"&&this.options.onAction){replaceRange(input,queryRange(query),[]);this.publish("selection");this.setQuery(null);this.options.onAction(item,query);}else{insertItem(input,query,item);this.publish("selection");this.setQuery(null);}};insertTrigger=character=>{const input=this.rich();if(!(input&&this.editable()&&this.options.triggers?.some(source=>source.character===character))){return;}const text=getComposerText(readValue(input));const selection=readSelection(input)??this.savedSelection??{anchor:text.length,focus:text.length};const start=Math.min(selection.anchor,selection.focus);const end=Math.max(selection.anchor,selection.focus);const prefix=separator(text.charAt(start-1));const suffix=separator(text.charAt(end));input.focus({preventScroll:true});restoreSelection(input,selection);this.prepare("trigger");insertPlainText(input,prefix+character+suffix);const caret=start+prefix.length+character.length;restoreSelection(input,{anchor:caret,focus:caret});this.publish();this.savedSelection=readSelection(input);};travel(direction){const input=this.rich();if(!(input&&this.editable())){return;}const snapshot=this.history.move(direction,readSelection(input));if(!snapshot){return;}writeValue(input,snapshot.value);restoreSelection(input,snapshot.selection);flushSync(()=>this.options.onValueChange(snapshot.value,{reason:"history"}));this.reconcile();this.dismiss();}reset=(value=[])=>{this.savedSelection=null;this.history.reset(value);this.dismiss();flushSync(()=>this.options.onValueChange(value,{reason:"reset"}));this.reconcile();// A reset triggered by a trusted click can run its native default action
+// after this microtask. Keep that action aligned with the owner's result.
+if(this.input instanceof HTMLTextAreaElement){this.input.defaultValue=this.input.value;}};canSubmit(){return this.editable()&&!this.options.submitDisabled&&(!!this.options.allowEmpty||!!getComposerText(this.options.value).trim());}performSubmit=()=>{if(!this.canSubmit()){return;}this.dismiss();this.options.onSubmit?.(this.options.value);};submit=()=>{if(!this.canSubmit()){return;}if(this.rootRef.current instanceof HTMLFormElement){this.rootRef.current.requestSubmit();}else{this.performSubmit();}};keyDown=event=>{if(ignoreKey(event,this.view.composing)){return;}const direction=this.view.textarea?0:undoDirection(event);if(direction){event.preventDefault();this.travel(direction);return;}if(event.key!=="Enter"||event.shiftKey){return;}const policy=this.options.submitOnEnter??"always";const sends=policy==="always"||policy==="desktop"&&matchMedia("(pointer: fine)").matches;if(sends){event.preventDefault();this.submit();}};copy=event=>{if(event.defaultPrevented||this.view.textarea){return null;}const range=editorRange(event.currentTarget);if(!range||range.collapsed){return null;}const container=event.currentTarget.ownerDocument.createElement("div");container.append(range.cloneContents());const value=readValue(container,false);event.clipboardData.setData("text/plain",getComposerText(value));event.clipboardData.setData(COMPOSER_CLIPBOARD_TYPE,JSON.stringify(value));event.preventDefault();return range;};cut=event=>{const range=this.copy(event);if(!(range&&this.editable())){return;}this.prepare("cut");range.deleteContents();this.publish();};paste=event=>{if(event.defaultPrevented||this.view.textarea){return;}event.preventDefault();if(!this.editable()){return;}const range=editorRange(event.currentTarget);if(!range){return;}this.prepare("paste");const value=parseComposerClipboard(event.clipboardData.getData(COMPOSER_CLIPBOARD_TYPE));if(value){replaceRange(event.currentTarget,range,value);}else{insertPlainText(event.currentTarget,event.clipboardData.getData("text/plain"));}this.publish();};drop=event=>{if(event.defaultPrevented||this.view.textarea){return;}event.preventDefault();if(!this.editable()){return;}const text=event.dataTransfer.getData("text/plain");if(!(text&&dropSelection(event.currentTarget,event.clientX,event.clientY))){return;}event.currentTarget.focus({preventScroll:true});this.prepare("drop");insertPlainText(event.currentTarget,text);this.publish();};}function separator(character){return character&&!SPACE.test(character)?" ":"";}function eventInInput(input,event){return event.target instanceof Node&&!!input?.contains(event.target);}function blockedInput(options,event){return!!options.disabled||!!options.readOnly||event.inputType.startsWith("format");}function dropPoint(doc,x,y){const position=doc.caretPositionFromPoint?.(x,y);if(position){return[position.offsetNode,position.offset];}const range=doc.caretRangeFromPoint?.(x,y);return range?[range.startContainer,range.startOffset]:null;}function dropSelection(input,x,y){const doc=input.ownerDocument;const point=dropPoint(doc,x,y);if(!(point&&input.contains(point[0]))){return false;}const[node,offset]=point;const element=node instanceof Element?node:node.parentElement;const token=element?.closest("[data-composer-token]");if(token?.parentNode){doc.getSelection()?.collapse(token.parentNode,Array.from(token.parentNode.childNodes).indexOf(token)+1);}else{doc.getSelection()?.collapse(node,offset);}return true;}

package/dist/components/composer/composer-value.d.ts

@@ -0,0 +1,45 @@
+import type { ReactNode } from "react";
+/** Data retained when a suggestion becomes part of the draft. */
+interface TokenData {
+    data?: string;
+    id: string;
+    kind?: string;
+    label: string;
+    text?: string;
+}
+type TokenKind = "mention" | "action";
+/** Inserted tokens have a concrete kind and the trigger that produced them. */
+export type ComposerTokenPart = TokenData & {
+    trigger: string;
+    type: TokenKind;
+};
+export type ComposerPart = ComposerTokenPart | {
+    text: string;
+    type: "text";
+};
+export type ComposerValue = readonly ComposerPart[];
+/** Suggestions add display and availability metadata to the insertion data. */
+export interface ComposerItemValue extends TokenData {
+    description?: string;
+    disabled?: boolean;
+    icon?: ReactNode;
+    type?: TokenKind;
+}
+/** A query identifies the trigger, current search text, and request identity. */
+export interface ComposerQuery {
+    character: string;
+    key: string;
+    text: string;
+}
+export type ComposerTriggerState = "ready" | "loading" | "error";
+/** Sources provide items synchronously; itemsFor identifies an async response. */
+export interface ComposerTrigger extends Pick<ComposerQuery, "character"> {
+    filter?: ((item: ComposerItemValue, query: string) => boolean) | null;
+    items: readonly ComposerItemValue[];
+    itemsFor?: string;
+    maxQueryLength?: number;
+    queryKey?: string;
+    showEmpty?: boolean;
+    status?: ComposerTriggerState;
+}
+export {};

package/dist/components/composer/composer-value.js

@@ -0,0 +1 @@
+export{};

package/dist/components/composer/composer.css

@@ -0,0 +1,80 @@
+/* Layout variables are scoped to each frame, including nested composers. */
+[data-slot="composer"] {
+	--composer-preferred-rows: initial;
+
+	--composer-columns: none;
+	--composer-rows: none;
+
+	--composer-frame-inset: 0px;
+	--composer-scroll-inset: var(--composer-padding);
+	--composer-text-inset: 0.75rem;
+	--composer-editor-column: auto;
+	--composer-editor-row: auto;
+
+	--composer-actions-column: auto;
+	--composer-actions-row: auto;
+	--composer-group-row: auto;
+	--composer-start-column: auto;
+	--composer-end-column: auto;
+	--composer-group-gap: initial;
+}
+[data-slot="composer"][data-layout="adaptive"] {
+	--composer-preferred-rows: 1;
+
+	--composer-columns: auto minmax(0, 1fr) auto;
+	--composer-editor-row: 1;
+	--composer-editor-column: 1 / -1;
+	--composer-actions-row: 2;
+	--composer-actions-column: 1 / -1;
+	--composer-rows: minmax(0, 1fr) auto;
+}
+[data-slot="composer"][data-layout="adaptive"]:not([data-multiline]) {
+	--composer-rows: none;
+	--composer-frame-inset: var(--composer-padding);
+	--composer-scroll-inset: 0px;
+	--composer-text-inset: 4px;
+	--composer-editor-column: 2;
+
+	--composer-group-row: 1;
+	--composer-start-column: 1;
+	--composer-end-column: 3;
+	--composer-group-gap: 8px;
+}
+[data-slot="composer-input"] {
+	min-height: calc(var(--composer-min-rows, 1) * 1lh + 0.75rem);
+}
+[data-layout="adaptive"] > [data-slot="composer-scroll-area"] {
+	--composer-min-rows: 1;
+}
+[data-slot="composer-scroll-area"] > [data-slot="composer-viewport"] {
+	--composer-row-limit: calc(
+		var(--composer-max-rows) *
+		var(--composer-line-height, 1.5rem) +
+		var(--composer-input-padding, 0.75rem)
+	);
+	height: auto;
+	min-height: 0;
+	max-height: min(50dvh, var(--composer-max-height, var(--composer-row-limit)));
+	overscroll-behavior: contain;
+}
+[data-slot="composer-suggestions-scroll"] > [data-slot="composer-viewport"] {
+	height: auto;
+	max-height: min(16rem, var(--available-height, 16rem));
+}
+[data-slot="composer-token-icon"] {
+	& > svg {
+		display: inline-block;
+		width: 0.875em;
+		height: 0.875em;
+		vertical-align: -0.125em;
+	}
+	&::after {
+		content: "\2060\00a0";
+	}
+}
+
+@supports (field-sizing: content) {
+	[data-slot="composer-input"] {
+		field-sizing: content;
+	}
+}

package/dist/components/composer/composer.d.ts

@@ -0,0 +1,72 @@
+import { Button as ButtonPrimitive } from "@base-ui/react/button";
+import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
+import { useRender } from "@base-ui/react/use-render";
+import { type ComponentProps, type ReactElement, type ReactNode } from "react";
+import type { Closed } from "../../closed";
+import { type ComposerEditorOptions, type ComposerItemValue, type ComposerTokenPart } from "./composer-editor";
+import "./composer.css";
+type ComposerPopupProps = Closed<ComponentProps<typeof PopoverPrimitive.Popup> & {
+    anchor?: ComponentProps<typeof PopoverPrimitive.Positioner>["anchor"];
+    side?: ComponentProps<typeof PopoverPrimitive.Positioner>["side"];
+    align?: ComponentProps<typeof PopoverPrimitive.Positioner>["align"];
+    sideOffset?: ComponentProps<typeof PopoverPrimitive.Positioner>["sideOffset"];
+    alignOffset?: ComponentProps<typeof PopoverPrimitive.Positioner>["alignOffset"];
+    portalProps?: Closed<ComponentProps<typeof PopoverPrimitive.Portal>>;
+}>;
+type ComposerFormProps = Closed<useRender.ComponentProps<"form">>;
+type ComposerLayout = "stacked" | "adaptive";
+type ComposerTokenVariant = "default" | "chip";
+export type ComposerProps = Closed<Omit<ComposerFormProps, "defaultValue" | "onSubmit" | "name"> & ComposerEditorOptions & {
+    layout?: ComposerLayout;
+    /**
+     * Stops the agent. While `working`, the submit button becomes Stop and
+     * Enter no longer sends.
+     */
+    onStop?: () => void;
+    /** The agent is working on the last message; the composer glows. */
+    working?: boolean;
+}>;
+export declare function Composer({ value, defaultValue, onValueChange, onSubmit, onQueryChange, onAction, triggers, disabled, readOnly, submitDisabled, allowEmpty, submitOnEnter, submitOnEmptySuggestions, getSuggestionsAnnouncement, working, onStop, ...frame }: ComposerProps): ReactElement;
+export declare function ComposerInput({ placeholder, renderToken, ...external }: Closed<useRender.ComponentProps<"div"> & {
+    placeholder?: string;
+    renderToken?: (token: ComposerTokenPart) => ReactNode;
+}>): ReactElement;
+export declare function ComposerToken({ token, variant, icon, children, ...external }: Closed<Omit<ComponentProps<"span">, "contentEditable"> & {
+    token: ComposerTokenPart;
+    variant?: ComposerTokenVariant;
+    icon?: ReactNode;
+}>): ReactElement;
+export declare function ComposerPopup({ portalProps, anchor, side, align, sideOffset, alignOffset, ...external }: ComposerPopupProps): ReactElement;
+export declare function ComposerList({ children, ...external }: Closed<Omit<useRender.ComponentProps<"div">, "children"> & {
+    children?: ReactNode | ((item: ComposerItemValue, index: number) => ReactNode);
+}>): ReactElement;
+export declare function ComposerItem({ value, disabled, render, ref, ...external }: Closed<Omit<useRender.ComponentProps<"button", {
+    highlighted: boolean;
+    disabled: boolean;
+}>, "value"> & {
+    value?: ComposerItemValue;
+}>): ReactElement;
+export declare function ComposerStatus(external: Closed<useRender.ComponentProps<"div">>): ReactElement;
+export declare function ComposerActions(external: Closed<ComponentProps<"div">>): ReactElement;
+export declare function ComposerActionGroup({ align, ...external }: Closed<ComponentProps<"div"> & {
+    align?: "start" | "end";
+}>): ReactElement;
+export declare function ComposerSubmit({ disabled, render, ref, ...external }: Closed<Omit<ComponentProps<typeof ButtonPrimitive>, "type">>): ReactElement;
+export type { ComposerContextCost, ComposerContextMeterProps, ComposerContextUsage, } from "./composer-context-meter";
+export { ComposerContextMeter } from "./composer-context-meter";
+export type { ComposerDictationProps } from "./composer-dictation";
+export { ComposerDictation } from "./composer-dictation";
+export { type ComposerChangeDetails, type ComposerItemValue, type ComposerPart, type ComposerQuery, type ComposerTokenPart, type ComposerTrigger, type ComposerTriggerState, type ComposerValue, getComposerText, useComposerContext, useComposerFilter, } from "./composer-editor";
+export type { ComposerAttachmentProps, ComposerAttachmentsProps, ComposerStatusBarGroupProps, ComposerStatusBarProps, ComposerStatusItemProps, } from "./composer-parts";
+export { ComposerAttachment, ComposerAttachments, ComposerStatusBar, ComposerStatusBarGroup, ComposerStatusItem, } from "./composer-parts";
+export type { ComposerPickerEffort, ComposerPickerOption, ComposerPickerProps, } from "./composer-picker";
+export { ComposerPicker } from "./composer-picker";
+export type { ComposerPopupProps, ComposerTokenVariant };
+export type ComposerInputProps = Closed<ComponentProps<typeof ComposerInput>>;
+export type ComposerTokenProps = Closed<ComponentProps<typeof ComposerToken>>;
+export type ComposerActionsProps = Closed<ComponentProps<typeof ComposerActions>>;
+export type ComposerActionGroupProps = Closed<ComponentProps<typeof ComposerActionGroup>>;
+export type ComposerSubmitProps = Closed<ComponentProps<typeof ComposerSubmit>>;
+export type ComposerListProps = Closed<ComponentProps<typeof ComposerList>>;
+export type ComposerItemProps = Closed<ComponentProps<typeof ComposerItem>>;
+export type ComposerStatusProps = Closed<ComponentProps<typeof ComposerStatus>>;

package/dist/components/composer/composer.js

@@ -0,0 +1,3 @@
+"use client";import{Button as ButtonPrimitive}from"@base-ui/react/button";import{mergeProps}from"@base-ui/react/merge-props";import{Popover as PopoverPrimitive}from"@base-ui/react/popover";import{useRender}from"@base-ui/react/use-render";import{props as stylexProps}from"@stylexjs/stylex";import{createContext,useContext}from"react";import{createPortal}from"react-dom";import{IconArrowUp,IconPlayerStopFilled}from"../../icons";import{Button}from"../button/button";import{presentation}from"./composer.styles";import{ComposerEditorProvider,focusComposerInput,getComposerText,readComposerToken,useComposerEditorContext,useComposerInputLayout,useComposerItem,useComposerSuggestionsContext}from"./composer-editor";import{composerPartStyles}from"./composer-parts.styles";import{ComposerScrollArea}from"./composer-scroll-area";import"./composer.css";import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";const StopAction=createContext(undefined);// All renderable div parts share the same ownership and event-merging rules.
+function useDivPart(name,external,defaults,refs=[]){const{render,ref,...rest}=external;Reflect.deleteProperty(rest,"data-slot");return useRender({defaultTagName:"div",props:mergeProps({...defaults,...{"data-slot":name}},rest),ref:[...refs,ref??null],render});}function WorkingLight(){const band=/*#__PURE__*/_jsx("span",{...stylexProps(composerPartStyles.glowBand)});return/*#__PURE__*/_jsxs("span",{"aria-hidden":"true","data-slot":"composer-glow",...stylexProps(composerPartStyles.glow),children:[/*#__PURE__*/_jsx("span",{...stylexProps(composerPartStyles.glowRing),children:band}),/*#__PURE__*/_jsx("span",{...stylexProps(composerPartStyles.glowBloom),children:/*#__PURE__*/_jsx("span",{...stylexProps(composerPartStyles.glowRing),children:band})})]});}function ComposerFrame({layout="stacked",name,render,ref,children,...external}){const editor=useComposerEditorContext();if(!editor){throw new Error("ComposerFrame requires Composer.");}Reflect.deleteProperty(external,"data-slot");const contents=/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(WorkingLight,{}),children,name?/*#__PURE__*/_jsx("input",{disabled:editor.disabled,name:name,type:"hidden",value:getComposerText(editor.value)}):null]});return useRender({defaultTagName:"form",props:mergeProps({...presentation("frame"),children:contents,...{"data-base-ui-swipe-ignore":""},...{"data-disabled":editor.disabled?"":undefined},...{"data-layout":layout},...{"data-readonly":editor.readOnly?"":undefined},...{"data-slot":"composer"},onClick:event=>focusComposerInput(event,false),onMouseDown:event=>focusComposerInput(event,true)},editor.formProps,external),ref:[editor.rootRef,editor.syncRootRef,ref??null],render});}export function Composer({value,defaultValue,onValueChange,onSubmit,onQueryChange,onAction,triggers,disabled,readOnly,submitDisabled,allowEmpty,submitOnEnter,submitOnEmptySuggestions,getSuggestionsAnnouncement,working,onStop,...frame}){const stop=working?onStop:undefined;const options={allowEmpty,defaultValue,disabled,getSuggestionsAnnouncement,onAction,onQueryChange,onSubmit,onValueChange,readOnly,submitDisabled:submitDisabled||stop!==undefined,submitOnEmptySuggestions,submitOnEnter,triggers,value};return/*#__PURE__*/_jsx(ComposerEditorProvider,{...options,children:/*#__PURE__*/_jsx(StopAction,{value:stop,children:/*#__PURE__*/_jsx(ComposerFrame,{...frame,"data-working":working?"":undefined})})});}function tokenPortal(host,index,renderToken){if(!host.parentElement){return null;}const token=readComposerToken(host.parentElement);const content=renderToken?.(token)??/*#__PURE__*/_jsx(ComposerToken,{token:token});return createPortal(content,host,String(index));}export function ComposerInput({placeholder,renderToken,...external}){const editor=useComposerEditorContext();const suggestions=useComposerSuggestionsContext();const layout=useComposerInputLayout();if(!editor){throw new Error("ComposerInput requires Composer.");}const{ref,...events}=editor.inputProps;const semantics=external.render===undefined?{"aria-multiline":true,contentEditable:true,role:"textbox",suppressContentEditableWarning:true}:{};const mode=editor.isTextarea?{contentEditable:undefined,disabled:editor.disabled,placeholder,readOnly:editor.readOnly}:suggestions?.inputProps;const draft=useDivPart("composer-input",external,mergeProps({...presentation("input"),...semantics,"aria-placeholder":placeholder,...{"data-empty":!editor.isTextarea&&editor.isEmpty&&!editor.isComposing?"":undefined},...{"data-placeholder":placeholder}},events,mode),[ref??null,layout.inputRef]);return/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(ComposerScrollArea,{region:"draft",children:draft}),editor.tokenHosts.map((host,index)=>tokenPortal(host,index,renderToken))]});}export function ComposerToken({token,variant="default",icon,children,...external}){Reflect.deleteProperty(external,"data-slot");const chip=variant==="chip";const glyph=chip&&icon?/*#__PURE__*/_jsx("span",{...presentation("icon"),"aria-hidden":"true","data-slot":"composer-token-icon",children:icon}):null;return/*#__PURE__*/_jsxs("span",{...presentation(...(chip?["token","chip"]:["token"])),contentEditable:false,"data-kind":token.kind,"data-slot":"composer-token","data-type":token.type,"data-variant":variant,...external,children:[glyph,/*#__PURE__*/_jsxs("span",{"data-slot":"composer-token-label",children:[chip?null:token.trigger,children??token.label]})]});}export function ComposerPopup({portalProps,anchor,side="top",align="start",sideOffset=4,alignOffset,...external}){const editor=useComposerEditorContext();Reflect.deleteProperty(external,"data-slot");const focus=editor?{finalFocus:false,initialFocus:false,role:"presentation"}:{};const panel=/*#__PURE__*/_jsx(PopoverPrimitive.Popup,{...presentation("popup"),"data-slot":"composer-popup",...focus,...external});return/*#__PURE__*/_jsx(PopoverPrimitive.Portal,{...portalProps,children:/*#__PURE__*/_jsx(PopoverPrimitive.Positioner,{...presentation("positioner"),align:align,alignOffset:alignOffset,anchor:anchor??editor?.rootRef,"data-slot":"composer-positioner",side:side,sideOffset:sideOffset,children:panel})});}export function ComposerList({children,...external}){const options=useComposerSuggestionsContext();const content=typeof children==="function"?options?.items.map(children):children;const list=useDivPart("composer-list",external,{...presentation("list"),"aria-label":options?"Suggestions":undefined,children:content,id:options?.listId,role:options?"listbox":undefined},[options?.registerList??null]);return/*#__PURE__*/_jsx(ComposerScrollArea,{region:"suggestions",children:list});}export function ComposerItem({value,disabled,render,ref,...external}){const unavailable=Boolean(disabled||value?.disabled);const option=useComposerItem(value,unavailable);Reflect.deleteProperty(external,"data-slot");return useRender({defaultTagName:"button",props:mergeProps({...option.props,...presentation("item"),...{"data-slot":"composer-item"},disabled:unavailable,type:"button"},external),ref:[option.ref,ref??null],render,state:{disabled:unavailable,highlighted:option.highlighted}});}export function ComposerStatus(external){return useDivPart("composer-status",external,{...presentation("status"),role:"status"});}export function ComposerActions(external){const{"data-slot":_slot,...rest}=external;return/*#__PURE__*/_jsx("div",{...presentation("actions"),"data-slot":"composer-actions",...rest});}export function ComposerActionGroup({align="start",...external}){Reflect.deleteProperty(external,"data-slot");return/*#__PURE__*/_jsx("div",{...presentation("group",align),"data-align":align,"data-slot":"composer-action-group",...external});}function keepDraftFocus(event,root){if(event.button!==0){return;}const draft=root?.querySelector('[data-slot="composer-input"]');if(draft===event.currentTarget.ownerDocument.activeElement){event.preventDefault();}}export function ComposerSubmit({disabled,render,ref,...external}){const editor=useComposerEditorContext();const stop=useContext(StopAction);Reflect.deleteProperty(external,"data-slot");const unavailable=disabled??!editor?.canSubmit;function send(event){if(disabled||event.defaultPrevented){return;}event.preventDefault();editor?.submit();}function halt(event){stop?.();event.currentTarget.closest('[data-slot="composer"]')?.querySelector('[data-slot="composer-input"]')?.focus();}const behavior=stop?{onClick:halt}:mergeProps({disabled:unavailable,onClick:send,onPointerDown:event=>keepDraftFocus(event,editor?.rootRef.current)},external);const sendFace=/*#__PURE__*/_jsx(Button,{"aria-label":"Send message",size:"icon-sm",variant:unavailable?"secondary":"default",children:/*#__PURE__*/_jsx(IconArrowUp,{"aria-hidden":"true",size:18})});const stopFace=/*#__PURE__*/_jsx(Button,{"aria-label":"Stop",size:"icon-sm",children:/*#__PURE__*/_jsx(IconPlayerStopFilled,{"aria-hidden":"true",size:14})});return/*#__PURE__*/_jsx(ButtonPrimitive,{"data-slot":"composer-submit",type:"button",...behavior,ref:ref,render:stop?stopFace:render??sendFace});}// biome-ignore lint/performance/noBarrelFile: The component entry point exposes its draft contract, editor hook, and parts.
+export{ComposerContextMeter}from"./composer-context-meter";export{ComposerDictation}from"./composer-dictation";export{getComposerText,useComposerContext,useComposerFilter}from"./composer-editor";export{ComposerAttachment,ComposerAttachments,ComposerStatusBar,ComposerStatusBarGroup,ComposerStatusItem}from"./composer-parts";export{ComposerPicker}from"./composer-picker";

package/dist/components/composer/composer.styles.js

@@ -0,0 +1,2 @@
+import{create,props}from"@stylexjs/stylex";import"../../styles/colors.stylex";import{colors}from"../../styles/colors.stylex";import"../../styles/conditions.stylex";import{conditions}from"../../styles/conditions.stylex";import"../../styles/interaction.stylex";import{borderWidth}from"../../styles/interaction.stylex";import"../../styles/motion.stylex";import{duration,easing}from"../../styles/motion.stylex";import"../../styles/shadows.stylex";import{shadows}from"../../styles/shadows.stylex";import"../../styles/shape.stylex";import{shape}from"../../styles/shape.stylex";import"../../styles/spacing.stylex";import{space}from"../../styles/spacing.stylex";import"../../styles/typography.stylex";import{fontSize,fontWeight,lineHeight}from"../../styles/typography.stylex";// Recipes share visual rules; layout decisions belong to the frame's CSS variables.
+const shared={motion:{kIyJzY:"x1j5v3x2 x1e471i8",kAMwcw:"xvhdtae",$$css:true},row:{kGNEyG:"x6s0dn4",k1xSpc:"x78zum5",k7Eaqz:"xeuugli",$$css:true},smallText:{kGuDYH:"xlh8hku",kLWn49:"x2xzzt7",$$css:true},surface:{kWkggS:"xwn18cz",kVAM5u:"x155xxfk",kaIpWk:"x1yl01a3",ksu8eU:"x1y0btm7",kMzoRj:"x1cdonsl",kMwMTN:"x14tvo57",$$css:true}};const slots={actions:{k1xSpc:"x1qh6cmi x78zum5",kmuXW:"x2lah0s",kwnvtZ:"x1a02dak",kOIVth:"xp4ho6d",kBCFzs:"xlpbpvi",kbNqZ1:"xgp7ahr",kjj79g:"x1qughib",kUOVxO:"x111xfez",$$css:true},chip:{kWkggS:"x16d8uok",kaIpWk:"x2b34ud",kmVPX3:"xlxy37g",$$css:true},end:{kBCFzs:"xv0y7cv",kjj79g:"x7v6yn8",keTefX:"x1uq2ew1",$$css:true},frame:{"--composer-max-rows":"x1xydwir xx2xmjc","--composer-min-rows":"x37a3tf xic22q3","--composer-padding":"x1x20h7e",kGNEyG:"xyg4dbn x13iwyz6",kVAM5u:"x1mpj4at x155xxfk",kGVxlE:"x10ilepr",kB7OPa:"x9f619",kkrTdU:"x1ed109x",k1xSpc:"x1hr9ey5 x78zum5",kXwgrk:"xdt5ytf",kumcoG:"x126v9vc",k9llMU:"x1d6wznv",kAzted:"x2lwn1j",k7Eaqz:"xeuugli",kSiTet:"x1oebp99 x1hc1fzr",kGO01o:"x1ibyohj",kwRFfy:"x98mbmy",kZCmMZ:"xmdlf1d",kLKAdn:"x1tybij7",kVAEAm:"x1n2onr6",k1ekBW:"x12zzom9",kzqmXN:"xh8yej3",$$css:true},group:{kwnvtZ:"x1a02dak",kOIVth:"x13hh4mm",kbNqZ1:"xdk1yc6",$$css:true},icon:{k1xSpc:"xt0psk2",khDVqt:"xuxw1ft",$$css:true},input:{kxBb7d:"x1ywmx03",kgeoSG:"x6w7v62 xnahlnb",km8f2m:"xkk1bqk",kEoFBp:"x1hmns74",k8Qsv1:"x10l60j5",kysU6D:"xjyslct",kWkggS:"xjbqb8w",kMzoRj:"xc342km",kB7OPa:"x9f619",kMwMTN:"x1heor9g",k1xSpc:"x1lliihq",kMv6JI:"xjb2p0i",kGuDYH:"x12ama9c",k63SB2:"x1lo1l87",kLWn49:"x1rn0pvf",k7Eaqz:"xeuugli",kI3sdo:"x1a2a7pz",kHjlTd:"xj0a0fe",k8WAf4:"x1lmimt7",kwRFfy:"xrw0n5k",kZCmMZ:"xpuzrt6",kVAEAm:"x1n2onr6",kHenm0:"xtt52l0",khDVqt:"x126k92a",kzqmXN:"xh8yej3",$$css:true},item:{kGNEyG:"x6s0dn4",kWkggS:"x1qtvqpc xjbqb8w",kaIpWk:"x2b34ud",kMzoRj:"xc342km",kMwMTN:"x1tnz15l x14tvo57",kkrTdU:"xt0e3qv",k1xSpc:"x78zum5",kMv6JI:"xjb2p0i",kOIVth:"xp4ho6d",kAzted:"x1in32aq",kSiTet:"x1oebp99 x1hc1fzr",kI3sdo:"x1a2a7pz",k8WAf4:"x1lmimt7",kg3NbH:"xb5xqfq",k9WMMc:"x1yc453h",kfSwDN:"x87ps6o",kzqmXN:"xh8yej3",$$css:true},list:{kHjlTd:"xj0a0fe",kmVPX3:"x1btfdvn",k2VNRW:"xzdc7cb",$$css:true},listScroll:{kskxy:"x8mbr27",kAzted:"x2lwn1j",$$css:true},popup:{kWkggS:"xui3q9s",kGVxlE:"x1mhlhek",ks0D6T:"x7k7lee",kSiTet:"xiyypsa x1hw7zpd x1hc1fzr",kI3sdo:"x1a2a7pz",k3aq6I:"x8o36ph x1nvizax x1c071of",k1ekBW:"x6o7n8i",kzqmXN:"x1hhjr3y",$$css:true},positioner:{kzqmXN:"x1hhjr3y",kY2c9j:"xa9119d",$$css:true},scroll:{kfmiAY:"xu25z0z",krdFHd:"x1fmog5m",kBCFzs:"xheteqw",kbNqZ1:"x1oea0wp",kAzted:"x2lwn1j",k7Eaqz:"xeuugli",kLKAdn:"xkvoga1",$$css:true},scrollbar:{kg3NbH:"x1gbt3hs",kzqmXN:"xrkia0p",$$css:true},start:{kBCFzs:"xq4xcwx",k71WvV:"x1c9zpoa",$$css:true},status:{kGNEyG:"x6s0dn4",kMwMTN:"x125omll",k1xSpc:"x78zum5",kGuDYH:"xlh8hku",kOIVth:"xp4ho6d",kjj79g:"x1qughib",k8WAf4:"x391bbb",kg3NbH:"xy7odpl",$$css:true},thumb:{kWkggS:"x1jhsfs9",kaIpWk:"x10hpsqq",$$css:true},token:{keMLs9:"xyh5bb9",kMwMTN:"xdnyjpo",kkrTdU:"xt0e3qv",k63SB2:"xuku2lm",kHjlTd:"xj0a0fe",kXLuUW:"x11njtxf",$$css:true}};const recipes={actions:[shared.row,slots.actions],chip:[slots.chip],end:[slots.end],frame:[shared.surface,shared.motion,slots.frame],group:[shared.row,slots.group],icon:[slots.icon],input:[slots.input],item:[shared.smallText,slots.item],list:[slots.list],listScroll:[slots.listScroll],popup:[shared.surface,shared.motion,slots.popup],positioner:[slots.positioner],scroll:[slots.scroll],scrollbar:[slots.scrollbar],start:[slots.start],status:[slots.status],thumb:[slots.thumb],token:[slots.token]};export function presentation(...names){return props(names.map(name=>recipes[name]));}

package/dist/components/composer/use-composer-editor.d.ts

@@ -0,0 +1,8 @@
+import { Autocomplete } from "@base-ui/react/autocomplete";
+import type { ComposerEditorController, UseComposerEditorOptions } from "./composer-options";
+import type { ComposerValue } from "./composer-value";
+export declare function useComposerEditor(options: UseComposerEditorOptions, resetValue?: ComposerValue): ComposerEditorController;
+export declare const useComposerFilter: typeof Autocomplete.useFilter;
+export { getComposerText } from "./composer-document";
+export type { ComposerChangeDetails, ComposerEditorController, UseComposerEditorOptions, } from "./composer-options";
+export type { ComposerItemValue, ComposerPart, ComposerQuery, ComposerTokenPart, ComposerTrigger, ComposerTriggerState, ComposerValue, } from "./composer-value";

package/dist/components/composer/use-composer-editor.js

@@ -0,0 +1,2 @@
+"use client";import{Autocomplete}from"@base-ui/react/autocomplete";import{useCallback,useState,useSyncExternalStore}from"react";import{getComposerText,getFilteredItems,hasVisibleItems}from"./composer-document";import{ComposerSession}from"./composer-session";const EMPTY=[];function editorState(options,view){const disabled=options.disabled??false;const readOnly=options.readOnly??false;const editable=!(disabled||readOnly||view.composing);return{canSubmit:editable&&!options.submitDisabled&&(!!options.allowEmpty||!!getComposerText(options.value).trim()),disabled,editable,isComposing:view.composing,isEmpty:!getComposerText(options.value),isTextarea:view.textarea,readOnly,value:options.value};}function inputProps(session,state){return{"aria-disabled":state.disabled||undefined,"aria-multiline":true,"aria-readonly":state.readOnly||undefined,contentEditable:state.isTextarea?undefined:!(state.disabled||state.readOnly),onBlur:session.blur,onClick:session.refreshQuery,onCompositionEnd:session.endComposition,onCompositionStart:session.startComposition,onCopy:session.copy,onCut:session.cut,onDrop:session.drop,onInput:session.inputChanged,onKeyDown:session.keyDown,onKeyUp(event){if(!(event.defaultPrevented||state.isComposing)){session.refreshQuery();}},onPaste:session.paste,ref:session.bind,role:"textbox",suppressContentEditableWarning:true,tabIndex:state.disabled?-1:0};}export function useComposerEditor(options,resetValue=EMPTY){const[session]=useState(()=>new ComposerSession(options));const view=useSyncExternalStore(session.subscribe,session.getSnapshot,session.getServerSnapshot);const{contains}=useComposerFilter();const trigger=options.triggers?.find(({character})=>character===view.query?.character);const items=getFilteredItems(trigger,view.query,contains);const state=editorState(options,view);const enabled=suggestionsEnabled(state.editable,view,options);const syncRootRef=useCallback(root=>{if(!root){return;}session.commit(options,resetValue);return session.bindRoot(root);},[session,options,resetValue]);return{...state,formProps:{onSubmit(event){if(event.defaultPrevented||event.target!==event.currentTarget){return;}event.preventDefault();session.performSubmit();}},inputProps:inputProps(session,state),insertTrigger:session.insertTrigger,reset:session.reset,rootRef:session.rootRef,status:trigger?.status??"ready",submit:session.submit,suggestions:{enabled,items,onItemSelect:session.select,onOpenChange(open){if(!open){session.dismiss();}},open:enabled&&!!view.query&&hasVisibleItems(trigger,items),submitOnEmptySuggestions:options.submitOnEmptySuggestions??false},syncRootRef,tokenHosts:view.hosts};}export const useComposerFilter=Autocomplete.useFilter;// biome-ignore lint/performance/noBarrelFile: Preserve public Composer exports.
+export{getComposerText}from"./composer-document";function suggestionsEnabled(editable,view,options){return editable&&!view.textarea&&!!options.triggers?.length;}