@womp/kookie-ui 0.10.0 → 0.12.0

package/src/components/app-bar.tsx

@@ -0,0 +1,256 @@
+import * as React from 'react';
+import classNames from 'classnames';
+
+import { Card } from './card.js';
+import { Flex } from './flex.js';
+import { Heading } from './heading.js';
+
+import type { CardProps } from './card.js';
+import type { FlexProps } from './flex.js';
+
+// ============================================================================
+// AppBar Root
+// ============================================================================
+
+type AppBarRootElement = React.ElementRef<'div'>;
+type Anchor = 'top' | 'bottom' | 'left' | 'right';
+type SpaceScale = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9';
+
+interface AppBarRootProps extends Omit<CardProps, 'asChild'> {
+  /**
+   * Which edge to anchor to. Sets position: sticky and the appropriate edge.
+   * @default "top"
+   */
+  anchor?: Anchor;
+  /**
+   * Floating mode adds margin from edges for a detached look with absolute positioning.
+   * When false (default), uses inset mode with negative margins to go edge-to-edge inside Cards.
+   * @default false
+   */
+  floating?: boolean;
+  /**
+   * Margin offset from edges when floating. Uses space scale values.
+   * @default "2"
+   */
+  offset?: SpaceScale;
+}
+
+/**
+ * An app bar: the band anchored to one edge of a pane, with left, center and right sections
+ * and a title. It publishes its height (or width) to its parent as `--rt-app-bar-height`
+ * (`--rt-app-bar-width`) so content can pad itself clear of it.
+ *
+ * This component was called `Toolbar` until 0.11.0. It is not a `role="toolbar"`: for a row of
+ * controls with one tab stop and arrow-key navigation, use `Toolbar`.
+ */
+const AppBarRoot = React.forwardRef<AppBarRootElement, AppBarRootProps>(
+  (props, forwardedRef) => {
+    const {
+      anchor = 'top',
+      floating = false,
+      offset = '2',
+      size = '1',
+      variant = 'ghost',
+      material,
+      className,
+      style,
+      children,
+      ...restProps
+    } = props;
+
+    const isHorizontal = anchor === 'top' || anchor === 'bottom';
+    const internalRef = React.useRef<HTMLDivElement>(null);
+
+    // Merge refs
+    const mergedRef = React.useCallback(
+      (node: HTMLDivElement | null) => {
+        (internalRef as React.MutableRefObject<HTMLDivElement | null>).current = node;
+        if (typeof forwardedRef === 'function') {
+          forwardedRef(node);
+        } else if (forwardedRef) {
+          forwardedRef.current = node;
+        }
+      },
+      [forwardedRef],
+    );
+
+    // Expose height/width as CSS variable on parent element
+    React.useEffect(() => {
+      const element = internalRef.current;
+      if (!element) return;
+
+      const parent = element.parentElement;
+      if (!parent) return;
+
+      const update = () => {
+        let dimension = isHorizontal ? element.offsetHeight : element.offsetWidth;
+
+        // For floating mode, include the margin in the total space
+        if (floating) {
+          const computedStyle = getComputedStyle(element);
+          const margin = parseFloat(computedStyle.marginTop) || 0;
+          dimension += margin * 2;
+        }
+
+        // `--rt-toolbar-*` are the names this bar published while it was called Toolbar.
+        // They are still written so existing layouts keep their offset; prefer `--rt-app-bar-*`.
+        if (isHorizontal) {
+          parent.style.setProperty('--rt-app-bar-height', `${dimension}px`);
+          parent.style.setProperty('--rt-toolbar-height', `${dimension}px`);
+        } else {
+          parent.style.setProperty('--rt-app-bar-width', `${dimension}px`);
+          parent.style.setProperty('--rt-toolbar-width', `${dimension}px`);
+        }
+      };
+
+      update();
+
+      const resizeObserver = new ResizeObserver(update);
+      resizeObserver.observe(element);
+
+      return () => resizeObserver.disconnect();
+    }, [isHorizontal, floating]);
+
+    const computedStyle = floating
+      ? { margin: `var(--space-${offset})`, ...style }
+      : style;
+
+    return (
+      <Card
+        ref={mergedRef}
+        size={size}
+        variant={variant}
+        material={material}
+        data-anchor={anchor}
+        data-floating={floating || undefined}
+        className={classNames('rt-AppBar', className)}
+        style={computedStyle}
+        {...restProps}
+      >
+        <div className="rt-AppBarInner">
+          {children}
+        </div>
+      </Card>
+    );
+  },
+);
+AppBarRoot.displayName = 'AppBar.Root';
+
+// ============================================================================
+// AppBar Left (for horizontal) / Start (alias)
+// ============================================================================
+
+type AppBarSectionElement = React.ElementRef<'div'>;
+type AppBarSectionProps = FlexProps;
+
+const AppBarLeft = React.forwardRef<AppBarSectionElement, AppBarSectionProps>(
+  ({ gap = '2', align = 'center', className, children, ...props }, forwardedRef) => (
+    <Flex
+      ref={forwardedRef}
+      align={align}
+      gap={gap}
+      className={classNames('rt-AppBarSection', 'rt-AppBarLeft', className)}
+      {...props}
+    >
+      {children}
+    </Flex>
+  ),
+);
+AppBarLeft.displayName = 'AppBar.Left';
+
+// ============================================================================
+// AppBar Center
+// ============================================================================
+
+const AppBarCenter = React.forwardRef<AppBarSectionElement, AppBarSectionProps>(
+  ({ gap = '2', align = 'center', justify = 'center', className, children, ...props }, forwardedRef) => (
+    <Flex
+      ref={forwardedRef}
+      align={align}
+      justify={justify}
+      gap={gap}
+      className={classNames('rt-AppBarSection', 'rt-AppBarCenter', className)}
+      {...props}
+    >
+      {children}
+    </Flex>
+  ),
+);
+AppBarCenter.displayName = 'AppBar.Center';
+
+// ============================================================================
+// AppBar Right (for horizontal) / End (alias)
+// ============================================================================
+
+const AppBarRight = React.forwardRef<AppBarSectionElement, AppBarSectionProps>(
+  ({ gap = '2', align = 'center', justify = 'end', className, children, ...props }, forwardedRef) => (
+    <Flex
+      ref={forwardedRef}
+      align={align}
+      justify={justify}
+      gap={gap}
+      className={classNames('rt-AppBarSection', 'rt-AppBarRight', className)}
+      {...props}
+    >
+      {children}
+    </Flex>
+  ),
+);
+AppBarRight.displayName = 'AppBar.Right';
+
+// ============================================================================
+// AppBar Title
+// ============================================================================
+
+type AppBarTitleElement = React.ElementRef<typeof Heading>;
+type AppBarTitleProps = React.ComponentPropsWithoutRef<typeof Heading>;
+
+const AppBarTitle = React.forwardRef<AppBarTitleElement, AppBarTitleProps>(
+  ({ className, size = '2', weight = 'medium', truncate = true, children, ...props }, forwardedRef) => (
+    <Heading
+      ref={forwardedRef}
+      size={size}
+      weight={weight}
+      truncate={truncate}
+      className={classNames('rt-AppBarTitle', className)}
+      {...props}
+    >
+      {children}
+    </Heading>
+  ),
+);
+AppBarTitle.displayName = 'AppBar.Title';
+
+// ============================================================================
+// Exports
+// ============================================================================
+
+const AppBar = AppBarRoot as typeof AppBarRoot & {
+  Root: typeof AppBarRoot;
+  Left: typeof AppBarLeft;
+  Center: typeof AppBarCenter;
+  Right: typeof AppBarRight;
+  Title: typeof AppBarTitle;
+};
+
+AppBar.Root = AppBarRoot;
+AppBar.Left = AppBarLeft;
+AppBar.Center = AppBarCenter;
+AppBar.Right = AppBarRight;
+AppBar.Title = AppBarTitle;
+
+export {
+  AppBar,
+  AppBarRoot as Root,
+  AppBarLeft as Left,
+  AppBarCenter as Center,
+  AppBarRight as Right,
+  AppBarTitle as Title,
+};
+export type {
+  AppBarRootProps as RootProps,
+  AppBarSectionProps as LeftProps,
+  AppBarSectionProps as CenterProps,
+  AppBarSectionProps as RightProps,
+  AppBarTitleProps as TitleProps,
+};

package/src/components/chatbar.css

@@ -8,7 +8,9 @@
 
 /* Defaults */
 .rt-ChatbarRoot {
-  --chatbar-attachment-thumb: var(--space-8);
+  --chatbar-item-lead: var(--space-5);
+  --chatbar-item-lead-radius: var(--radius-2);
+  --chatbar-item-padding: var(--space-1);
   /* A column: notices, then the box (which fills any height the consumer gives the root), then context. */
   display: flex;
   flex-direction: column;
@@ -116,58 +118,97 @@
   --scrollarea-scrollbar-size: 3px;
 }
 
-/* Attachment tile now uses Card + Flex, no custom layout needed */
+/*
+ * Attachments and items are one pill: a lead tile (thumbnail or tinted icon),
+ * a label and a remove button. A custom `renderAttachment` keeps only the
+ * plain .rt-ChatbarAttachment hook.
+ */
+.rt-ChatbarAttachment {
+  position: relative;
+}
+
+.rt-ChatbarItem {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  flex-shrink: 0;
+  box-sizing: border-box;
+  max-width: 240px;
+  padding: var(--chatbar-item-padding);
+  padding-right: calc(var(--chatbar-item-padding) + var(--space-1));
+  border: 1px solid var(--gray-a5);
+  border-radius: calc(var(--chatbar-item-lead-radius) + var(--chatbar-item-padding));
+  background-color: var(--color-panel-solid);
+  box-shadow: 0 1px 2px var(--gray-a3);
+  color: var(--gray-12);
+}
+
+.rt-ChatbarItem:where([data-status='error']) {
+  border-color: var(--red-a7);
+}
 
-.rt-ChatbarAttachmentPreview {
-  height: var(--chatbar-attachment-thumb);
-  width: var(--chatbar-attachment-thumb);
-  min-width: var(--chatbar-attachment-thumb);
+.rt-ChatbarItemLead {
+  height: var(--chatbar-item-lead);
+  width: var(--chatbar-item-lead);
   flex-shrink: 0;
-  border-radius: var(--radius-1);
+  border-radius: var(--chatbar-item-lead-radius);
   overflow: hidden;
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  background: var(--accent-a3);
+  color: var(--accent-11);
+
+  /* stylelint-disable-next-line selector-max-type */
+  & :where(svg) {
+    width: calc(var(--chatbar-item-lead) * 0.6);
+    height: calc(var(--chatbar-item-lead) * 0.6);
+  }
+
+  &:where([data-kind='image']) {
+    background: var(--gray-a3);
+  }
+}
+
+/* An attachment's file icon and spinner stay neutral */
+.rt-ChatbarAttachment .rt-ChatbarItemLead:where([data-kind='icon']) {
   background: var(--gray-a3);
+  color: var(--gray-11);
 }
 
 .rt-ChatbarAttachmentImage {
+  width: 100%;
   height: 100%;
-  width: auto;
-  object-fit: contain;
+  object-fit: cover;
   max-width: none;
 }
 
-/* PaperclipIcon handles its own sizing via IconButton */
-
-.rt-ChatbarAttachment {
-  position: relative;
-  background-color: var(--gray-1);
-  border-radius: var(--radius-1);
-}
-
-/* Maximum width for non-image attachments */
-.rt-ChatbarAttachment:where([data-kind='file']) {
-  max-width: 200px;
+.rt-ChatbarItemLabel {
+  min-width: 0;
 }
 
-.rt-ChatbarAttachmentRemove {
-  position: absolute;
-  top: var(--chatbar-remove-offset);
-  right: var(--chatbar-remove-offset);
+.rt-ChatbarItemRemove {
+  flex-shrink: 0;
+  margin-left: calc(var(--space-1) * -1);
 }
 
-/* Size-dependent radius for attachment container and preview */
 @breakpoints {
-  .rt-ChatbarRoot:where(.rt-r-size-1) :where(.rt-ChatbarAttachment, .rt-ChatbarAttachmentPreview) {
-    border-radius: var(--radius-1);
-    /* border-radius: var(--radius-1); */
-  }
-  .rt-ChatbarRoot:where(.rt-r-size-2) :where(.rt-ChatbarAttachment, .rt-ChatbarAttachmentPreview) {
-    border-radius: var(--radius-2);
-  }
-  .rt-ChatbarRoot:where(.rt-r-size-3) :where(.rt-ChatbarAttachment, .rt-ChatbarAttachmentPreview) {
-    border-radius: var(--radius-3);
+  .rt-ChatbarRoot {
+    &:where(.rt-r-size-1) {
+      --chatbar-item-lead: var(--space-4);
+      --chatbar-item-lead-radius: var(--radius-1);
+      --chatbar-item-padding: var(--space-1);
+    }
+    &:where(.rt-r-size-2) {
+      --chatbar-item-lead: var(--space-5);
+      --chatbar-item-lead-radius: var(--radius-2);
+      --chatbar-item-padding: var(--space-1);
+    }
+    &:where(.rt-r-size-3) {
+      --chatbar-item-lead: calc(var(--space-5) + var(--space-1));
+      --chatbar-item-lead-radius: var(--radius-2);
+      --chatbar-item-padding: calc(var(--space-1) * 1.5);
+    }
   }
 }
 
@@ -575,24 +616,18 @@
     &:where(.rt-r-size-1) {
       font-size: var(--font-size-1);
       line-height: var(--line-height-1);
-      --chatbar-attachment-thumb: var(--space-8);
-      --chatbar-remove-offset: calc(var(--space-1) * 0.5);
       /* --chatbar-attachments-radius: min(var(--radius-5), calc(var(--radius-1) + var(--space-1))); */
       --chatbar-attachments-radius: var(--radius-1);
     }
     &:where(.rt-r-size-2) {
       font-size: var(--font-size-2);
       line-height: var(--line-height-2);
-      --chatbar-attachment-thumb: var(--space-9);
-      --chatbar-remove-offset: var(--space-1);
       /* --chatbar-attachments-radius: min(var(--radius-6), calc(var(--radius-2) + var(--space-2))); */
       --chatbar-attachments-radius: var(--radius-2);
     }
     &:where(.rt-r-size-3) {
       font-size: var(--font-size-3);
       line-height: var(--line-height-3);
-      --chatbar-attachment-thumb: var(--space-9);
-      --chatbar-remove-offset: var(--space-2);
       /* --chatbar-attachments-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-3))); */
       --chatbar-attachments-radius: var(--radius-3);
     }

package/src/components/chatbar.tsx

@@ -1030,18 +1030,22 @@ InlineEnd.displayName = 'Chatbar.InlineEnd';
 /**
  * Renders a horizontally scrollable list of attachments above the inline row.
  * Hidden when empty unless `forceMount`. Override per-item with `renderAttachment`.
+ * `Chatbar.Item`s passed as children follow the attachments in the same row.
  */
 interface AttachmentsRowProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'children'> {
   asChild?: boolean;
   forceMount?: boolean;
   /** If provided, custom-render a tile; otherwise default tile is used */
   renderAttachment?: (attachment: ChatbarAttachment) => React.ReactNode;
+  /** `Chatbar.Item`s: things the message refers to that are not files. */
+  children?: React.ReactNode;
 }
 
 const AttachmentsRow = React.forwardRef<HTMLDivElement, AttachmentsRowProps>((props, forwardedRef) => {
-  const { asChild, forceMount, renderAttachment, className, ...divProps } = props;
+  const { asChild, forceMount, renderAttachment, className, children, ...divProps } = props;
   const ctx = useChatbarContext();
-  if (ctx.attachments.length === 0 && !forceMount) return null;
+  const hasItems = React.Children.toArray(children).length > 0;
+  if (ctx.attachments.length === 0 && !hasItems && !forceMount) return null;
   const Comp = asChild ? Slot : 'div';
   return (
     <m.div layout="position" transition={LAYOUT_TRANSITION}>
@@ -1053,6 +1057,7 @@ const AttachmentsRow = React.forwardRef<HTMLDivElement, AttachmentsRowProps>((pr
                 {renderAttachment?.(att)}
               </Attachment>
             ))}
+            {children}
           </Flex>
         </ScrollArea>
       </Comp>
@@ -1061,6 +1066,50 @@ const AttachmentsRow = React.forwardRef<HTMLDivElement, AttachmentsRowProps>((pr
 });
 AttachmentsRow.displayName = 'Chatbar.AttachmentsRow';
 
+/**
+ * Moves focus off a pill that is about to unmount, to the next pill's remove
+ * button, the previous one's, or the text, so keyboard users are not dropped
+ * to <body>.
+ */
+function moveFocusOffPill(button: HTMLButtonElement, textareaRef: React.RefObject<HTMLTextAreaElement | null>) {
+  const pill = button.closest('[role="listitem"]');
+  const pills = pill?.parentElement ? Array.from(pill.parentElement.children) : [];
+  const index = pill ? pills.indexOf(pill) : -1;
+  const neighbour = pills[index + 1] ?? pills[index - 1];
+  const nextButton = neighbour?.querySelector<HTMLButtonElement>('.rt-ChatbarItemRemove');
+  if (nextButton) nextButton.focus();
+  else textareaRef.current?.focus({ preventScroll: true });
+}
+
+/** The pill an attachment and an item share: a lead tile, a label and ×. */
+const Pill: React.FC<{
+  lead: React.ReactNode;
+  leadKind: 'image' | 'icon';
+  label: React.ReactNode;
+  /** Read after the label by screen readers only, e.g. a file's size. */
+  detail?: string;
+  removeLabel: string;
+  onRemove?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+}> = ({ lead, leadKind, label, detail, removeLabel, onRemove }) => {
+  const ctx = useChatbarContext();
+  return (
+    <>
+      <span className="rt-ChatbarItemLead" data-kind={leadKind} aria-hidden>
+        {lead}
+      </span>
+      <Text className="rt-ChatbarItemLabel" size={ctx.size} truncate>
+        {label}
+        {detail ? <VisuallyHidden>, {detail}</VisuallyHidden> : null}
+      </Text>
+      {onRemove && (
+        <IconButton className="rt-ChatbarItemRemove" aria-label={removeLabel} size="1" variant="ghost" color="gray" onClick={onRemove}>
+          <CloseIcon />
+        </IconButton>
+      )}
+    </>
+  );
+};
+
 /** Default tile renderer for a single attachment. */
 interface AttachmentProps extends React.ComponentPropsWithoutRef<'div'> {
   attachment: ChatbarAttachment;
@@ -1079,71 +1128,98 @@ const Attachment = React.forwardRef<HTMLDivElement, AttachmentProps>((props, for
   const locked = ctx.disabled || ctx.readOnly;
 
   const handleRemove = (event: React.MouseEvent<HTMLButtonElement>) => {
-    // Move focus before the tile unmounts so keyboard users are not dropped to <body>
-    const tile = event.currentTarget.closest('[role="listitem"]');
-    const tiles = tile?.parentElement ? Array.from(tile.parentElement.children) : [];
-    const index = tile ? tiles.indexOf(tile) : -1;
-    const neighbour = tiles[index + 1] ?? tiles[index - 1];
-    const nextButton = neighbour?.querySelector<HTMLButtonElement>('.rt-ChatbarAttachmentRemove');
-    if (nextButton) nextButton.focus();
-    else ctx.textareaRef.current?.focus({ preventScroll: true });
+    moveFocusOffPill(event.currentTarget, ctx.textareaRef);
     ctx.removeAttachment(attachment.id);
   };
 
+  const lead =
+    attachment.status === 'uploading' ? (
+      <Spinner size="1" />
+    ) : isImage ? (
+      <img className="rt-ChatbarAttachmentImage" src={attachment.url} alt="" />
+    ) : (
+      <FileTextIcon />
+    );
+
   return (
     <Comp
       {...divProps}
       ref={forwardedRef}
-      className={classNames('rt-ChatbarAttachment', className)}
+      className={classNames(children ? 'rt-ChatbarAttachment' : 'rt-ChatbarAttachment rt-ChatbarItem', className)}
       role="listitem"
       data-kind={isImage ? 'image' : 'file'}
       data-status={attachment.status}
       title={attachment.name}
     >
       {children ?? (
-        <Flex align="center" gap="2" pr={!isImage ? '6' : undefined}>
-          <div className="rt-ChatbarAttachmentPreview" aria-hidden>
-            {isImage ? <img className="rt-ChatbarAttachmentImage" src={attachment.url} alt="" /> : <FileTextIcon />}
-          </div>
-          {isImage ? (
-            <VisuallyHidden>
-              {attachment.name}, {sizeLabel}
-              {statusLabel ? `, ${statusLabel}` : ''}
-            </VisuallyHidden>
-          ) : (
-            <Flex direction="column" gap="0" minWidth="0">
-              <Text size={ctx.size} weight="medium" truncate>
-                {attachment.name}
-              </Text>
-              <Text
-                size="1"
-                color={attachment.status === 'error' ? 'red' : undefined}
-                emphasis={attachment.status === 'error' ? undefined : 'medium'}
-              >
-                {sizeLabel}
-                {statusLabel ? ` · ${statusLabel}` : ''}
-              </Text>
-            </Flex>
-          )}
-          {!locked && (
-            <IconButton
-              className="rt-ChatbarAttachmentRemove"
-              aria-label={`Remove ${attachment.name}`}
-              size="1"
-              variant="classic"
-              color="gray"
-              onClick={handleRemove}
-            >
-              <CloseIcon />
-            </IconButton>
-          )}
-        </Flex>
+        <Pill
+          lead={lead}
+          leadKind={isImage && attachment.status !== 'uploading' ? 'image' : 'icon'}
+          label={attachment.name}
+          detail={statusLabel ? `${sizeLabel}, ${statusLabel}` : sizeLabel}
+          removeLabel={`Remove ${attachment.name}`}
+          onRemove={locked ? undefined : handleRemove}
+        />
       )}
     </Comp>
   );
 });
 Attachment.displayName = 'Chatbar.Attachment';
 
+/**
+ * Something the message refers to that is not a file: a scene object, a
+ * picked mode, a selection. The same pill as an attachment, placed in
+ * `Chatbar.AttachmentsRow` as a child. The app owns the list, so removing one
+ * calls `onRemove` and nothing else; leave it out for a pill that cannot be
+ * removed.
+ */
+interface ItemProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'children' | 'color'> {
+  /** The label. Also names the remove button: "Remove {label}". */
+  children: string;
+  /** Drawn in the lead tile, tinted with `color`. */
+  icon?: React.ReactNode;
+  /** A thumbnail for the lead tile, in place of the icon. */
+  image?: string;
+  /** Tint of the icon tile. Defaults to gray. */
+  color?: (typeof accentColors)[number];
+  onRemove?: () => void;
+  /** Overrides the remove button's label. */
+  removeLabel?: string;
+}
+
+const Item = React.forwardRef<HTMLDivElement, ItemProps>((props, forwardedRef) => {
+  const { children, icon, image, color, onRemove, removeLabel, className, ...divProps } = props;
+  const ctx = useChatbarContext();
+  const locked = ctx.disabled || ctx.readOnly;
+
+  const handleRemove = onRemove
+    ? (event: React.MouseEvent<HTMLButtonElement>) => {
+        moveFocusOffPill(event.currentTarget, ctx.textareaRef);
+        onRemove();
+      }
+    : undefined;
+
+  return (
+    <div
+      {...divProps}
+      ref={forwardedRef}
+      className={classNames('rt-ChatbarItem', className)}
+      role="listitem"
+      data-accent-color={image ? undefined : (color ?? 'gray')}
+      title={children}
+    >
+      <Pill
+        lead={image ? <img className="rt-ChatbarAttachmentImage" src={image} alt="" /> : icon}
+        leadKind={image ? 'image' : 'icon'}
+        label={children}
+        removeLabel={removeLabel ?? `Remove ${children}`}
+        onRemove={locked ? undefined : handleRemove}
+      />
+    </div>
+  );
+});
+Item.displayName = 'Chatbar.Item';
+
 interface AttachTriggerProps extends React.ComponentPropsWithoutRef<'button'> {
   asChild?: boolean;
   /** Overrides Root `accept` for files chosen through this trigger */
@@ -1346,13 +1422,14 @@ const Send = React.forwardRef<HTMLButtonElement, SendProps>((props, forwardedRef
 });
 Send.displayName = 'Chatbar.Send';
 
-export { Root, Textarea, InlineStart, InlineEnd, AttachmentsRow, Attachment, AttachTrigger, Row, RowStart, RowEnd, Send };
+export { Root, Textarea, InlineStart, InlineEnd, AttachmentsRow, Attachment, Item, AttachTrigger, Row, RowStart, RowEnd, Send };
 export type {
   RootProps as ChatbarRootProps,
   TextareaProps as ChatbarTextareaProps,
   InlineSlotProps as ChatbarInlineSlotProps,
   AttachmentsRowProps as ChatbarAttachmentsRowProps,
   AttachmentProps as ChatbarAttachmentProps,
+  ItemProps as ChatbarItemProps,
   AttachTriggerProps as ChatbarAttachTriggerProps,
   RowProps as ChatbarRowProps,
   RowSlotProps as ChatbarRowSlotProps,

package/src/components/index.css

@@ -57,6 +57,8 @@
 @import './text-area.css';
 @import './text-field.css';
 @import './theme-panel.css';
+/* AppBar keeps the place its old toolbar.css had: it extends Card and must come after card.css */
+@import './app-bar.css';
 @import './toolbar.css';
 @import './tooltip.css';
 @import './user-card.css';