@usefragments/ui 1.3.2 → 1.4.0

package/src/components/Prompt/index.tsx

@@ -3,6 +3,7 @@
 import * as React from 'react';
 import styles from './Prompt.module.scss';
 import { Loading } from '../Loading';
+import { Select, type SelectOption, type SelectValue } from '../Select';
 
 // ============================================
 // Types
@@ -10,6 +11,8 @@ import { Loading } from '../Loading';
 
 export type PromptVariant = 'default' | 'fixed' | 'sticky';
 
+export type PromptAppearance = 'panel' | 'seamless';
+
 export interface PromptProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'onSubmit' | 'defaultValue'> {
   children: React.ReactNode;
   /** Controlled input value */
@@ -34,8 +37,19 @@ export interface PromptProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
   autoResize?: boolean;
   /** Submit on Enter key (Shift+Enter for newline) */
   submitOnEnter?: boolean;
+  /** Files added to the prompt, by any of the three routes people actually
+   * use: the attach button, a paste, or a drop anywhere on the card. Providing
+   * it is what turns all three on. */
+  onFiles?: (files: File[]) => void;
+  /** `accept` for the attach button's picker, e.g. `"image/*"`. */
+  accept?: string;
   /** Visual variant - "fixed" for bottom-fixed elevated prompt */
   variant?: PromptVariant;
+  /** How the card is divided up. `panel` keeps the toolbar as a filled footer
+   * under a rule; `seamless` makes the whole card one writing surface with the
+   * controls floating on it — the shape most agent composers use.
+   * @default "panel" */
+  appearance?: PromptAppearance;
 }
 
 export interface PromptTextareaProps extends Omit<
@@ -48,6 +62,8 @@ export interface PromptTextareaProps extends Omit<
   onChange?: React.ChangeEventHandler<HTMLTextAreaElement>;
   /** Composed with internal submit-on-enter logic */
   onKeyDown?: React.KeyboardEventHandler<HTMLTextAreaElement>;
+  /** Composed with the prompt's paste-to-attach behaviour */
+  onPaste?: React.ClipboardEventHandler<HTMLTextAreaElement>;
 }
 
 export interface PromptToolbarProps {
@@ -101,6 +117,59 @@ export interface PromptModeButtonProps {
   className?: string;
 }
 
+/** One thing attached to the prompt, as the strip needs to render it. */
+export interface PromptAttachment {
+  id: string;
+  name: string;
+  /** Size in bytes. Shown beside the name when known. */
+  size?: number;
+  /** Object URL or data URI. An image gets a thumbnail instead of an icon. */
+  previewUrl?: string;
+}
+
+export interface PromptAttachmentsProps {
+  items: PromptAttachment[];
+  /** Omit to render the strip read-only. */
+  onRemove?: (id: string) => void;
+  className?: string;
+}
+
+export interface PromptAttachProps {
+  /** Accessible name.
+   * @default "Attach files" */
+  'aria-label'?: string;
+  /** Custom glyph. Defaults to a plus. */
+  children?: React.ReactNode;
+  /** Overrides the prompt's own `accept` for this control. */
+  accept?: string;
+  /** @default true */
+  multiple?: boolean;
+  disabled?: boolean;
+  className?: string;
+}
+
+export interface PromptSelectProps {
+  /** Leading glyph — says what the choice is about, so the visible text can be
+   * the choice itself. */
+  icon?: React.ReactNode;
+  /** Accessible name. The trigger shows the current choice, not this. */
+  'aria-label': string;
+  /** Controlled value */
+  value?: SelectValue | null;
+  /** Default value for uncontrolled usage */
+  defaultValue?: SelectValue;
+  /** Called when the choice changes */
+  onValueChange?: (value: SelectValue | null) => void;
+  /** The choices. Omit and pass `Select.Item` children for richer options. */
+  options?: SelectOption[];
+  children?: React.ReactNode;
+  /** Shown before anything is chosen */
+  placeholder?: string;
+  /** Disabled independently of the prompt's own disabled state */
+  disabled?: boolean;
+  className?: string;
+}
+
 export interface PromptUsageProps {
   children: React.ReactNode;
   className?: string;
@@ -118,6 +187,36 @@ export interface PromptSubmitProps {
 // Icons
 // ============================================
 
+function PlusIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 256 256"
+      fill="currentColor"
+      aria-hidden="true"
+    >
+      <path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z" />
+    </svg>
+  );
+}
+
+function CloseIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 256 256"
+      fill="currentColor"
+      aria-hidden="true"
+    >
+      <path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z" />
+    </svg>
+  );
+}
+
 function ArrowUpIcon() {
   return (
     <svg
@@ -149,6 +248,10 @@ interface PromptContextValue {
   submitOnEnter: boolean;
   handleSubmit: () => void;
   textareaRef: React.RefObject<HTMLTextAreaElement | null>;
+  accept?: string;
+  /** Undefined when the consumer has not opted into files at all, which is how
+   * Attach knows to disable itself and the root knows not to accept drops. */
+  onFiles?: (files: File[]) => void;
 }
 
 const PromptContext = React.createContext<PromptContextValue | null>(null);
@@ -205,10 +308,19 @@ function PromptRoot({
   autoResize = true,
   submitOnEnter = true,
   variant = 'default',
+  appearance = 'panel',
+  onFiles,
+  accept,
   className,
   ...htmlProps
 }: PromptProps) {
   const textareaRef = React.useRef<HTMLTextAreaElement>(null);
+  const [dragging, setDragging] = React.useState(false);
+  // Drag events fire for every element the pointer crosses inside the card, so
+  // a naive enter/leave pair flickers as the cursor moves between children.
+  // Counting them means the highlight only drops when the pointer has actually
+  // left the composer.
+  const dragDepth = React.useRef(0);
 
   const [value, setValue] = useControllableState(
     controlledValue,
@@ -221,6 +333,14 @@ function PromptRoot({
     onSubmit?.(value);
   }, [disabled, loading, value, onSubmit]);
 
+  const acceptFiles = React.useCallback(
+    (files: File[]) => {
+      if (!onFiles || disabled || loading || files.length === 0) return;
+      onFiles(files);
+    },
+    [onFiles, disabled, loading]
+  );
+
   const contextValue: PromptContextValue = {
     value,
     setValue,
@@ -233,12 +353,43 @@ function PromptRoot({
     submitOnEnter,
     handleSubmit,
     textareaRef,
+    accept,
+    onFiles: onFiles ? acceptFiles : undefined,
   };
 
+  const dropHandlers = onFiles
+    ? {
+        onDragEnter: (event: React.DragEvent<HTMLDivElement>) => {
+          if (!event.dataTransfer.types.includes('Files')) return;
+          dragDepth.current += 1;
+          setDragging(true);
+        },
+        onDragOver: (event: React.DragEvent<HTMLDivElement>) => {
+          if (!event.dataTransfer.types.includes('Files')) return;
+          // Without this the browser navigates to the dropped file.
+          event.preventDefault();
+          event.dataTransfer.dropEffect = 'copy';
+        },
+        onDragLeave: () => {
+          dragDepth.current = Math.max(0, dragDepth.current - 1);
+          if (dragDepth.current === 0) setDragging(false);
+        },
+        onDrop: (event: React.DragEvent<HTMLDivElement>) => {
+          if (!event.dataTransfer.types.includes('Files')) return;
+          event.preventDefault();
+          dragDepth.current = 0;
+          setDragging(false);
+          acceptFiles(Array.from(event.dataTransfer.files));
+        },
+      }
+    : null;
+
   const classes = [
     styles.prompt,
     variant === 'fixed' && styles.fixed,
     variant === 'sticky' && styles.sticky,
+    appearance === 'seamless' && styles.seamless,
+    dragging && styles.dragging,
     disabled && styles.disabled,
     loading && styles.loading,
     className,
@@ -248,10 +399,13 @@ function PromptRoot({
     <PromptContext.Provider value={contextValue}>
       <div
         {...htmlProps}
+        {...dropHandlers}
         className={classes}
         data-disabled={disabled || undefined}
         data-loading={loading || undefined}
         data-variant={variant}
+        data-appearance={appearance}
+        data-dragging={dragging || undefined}
       >
         {children}
       </div>
@@ -264,6 +418,7 @@ function PromptTextarea({
   className,
   onChange,
   onKeyDown,
+  onPaste,
   'aria-label': ariaLabel,
   ...htmlProps
 }: PromptTextareaProps) {
@@ -279,6 +434,7 @@ function PromptTextarea({
     submitOnEnter,
     handleSubmit,
     textareaRef,
+    onFiles,
   } = usePromptContext();
 
   const lineHeight = 1.5;
@@ -321,6 +477,26 @@ function PromptTextarea({
     }
   };
 
+  // Pasting a screenshot is how people actually attach one. The clipboard
+  // carries it as a file with no name, so it gets one here — a bare "image.png"
+  // in the strip is worse than useless when there are two of them.
+  const handlePaste = (e: React.ClipboardEvent<HTMLTextAreaElement>) => {
+    onPaste?.(e);
+    if (e.defaultPrevented || !onFiles) return;
+    const files = Array.from(e.clipboardData.files);
+    if (files.length === 0) return;
+    e.preventDefault();
+    onFiles(
+      files.map((file, index) =>
+        file.name && file.name !== 'image.png'
+          ? file
+          : new File([file], `pasted-${index + 1}.${file.type.split('/')[1] || 'png'}`, {
+              type: file.type,
+            })
+      )
+    );
+  };
+
   const classes = [styles.textarea, className].filter(Boolean).join(' ');
 
   return (
@@ -331,6 +507,7 @@ function PromptTextarea({
       value={value}
       onChange={handleChange}
       onKeyDown={handleKeyDown}
+      onPaste={handlePaste}
       placeholder={overridePlaceholder ?? placeholder}
       disabled={disabled || loading}
       rows={minRows}
@@ -431,6 +608,147 @@ function PromptModeButton({
   );
 }
 
+/** Bytes as something a person reads at a glance, not as a precise count. */
+function formatSize(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  const kb = bytes / 1024;
+  if (kb < 1024) return `${Math.round(kb)} KB`;
+  return `${(kb / 1024).toFixed(kb / 1024 < 10 ? 1 : 0)} MB`;
+}
+
+/**
+ * What is going with the message. Renders above the textarea rather than under
+ * the toolbar, because these are part of what you are sending and not a
+ * setting on the sending.
+ */
+function PromptAttachments({ items, onRemove, className }: PromptAttachmentsProps) {
+  if (items.length === 0) return null;
+  const classes = [styles.attachments, className].filter(Boolean).join(' ');
+
+  return (
+    <ul className={classes} aria-label="Attachments">
+      {items.map((item) => (
+        <li key={item.id} className={styles.attachment}>
+          {item.previewUrl ? (
+            // Decorative: the filename beside it is the accessible name, and a
+            // thumbnail of a screenshot has no description worth inventing.
+            <img src={item.previewUrl} alt="" className={styles.attachmentThumb} />
+          ) : null}
+          <span className={styles.attachmentName} title={item.name}>
+            {item.name}
+          </span>
+          {item.size != null && (
+            <span className={styles.attachmentSize}>{formatSize(item.size)}</span>
+          )}
+          {onRemove && (
+            <button
+              type="button"
+              className={styles.attachmentRemove}
+              onClick={() => onRemove(item.id)}
+              aria-label={`Remove ${item.name}`}
+            >
+              <CloseIcon />
+            </button>
+          )}
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+/**
+ * The attach control. Does nothing on its own — it opens a picker and hands
+ * the result to the prompt's `onFiles`, the same callback that paste and drop
+ * go through, so a consumer writes one handler for all three.
+ */
+function PromptAttach({
+  'aria-label': ariaLabel = 'Attach files',
+  children,
+  accept: acceptOverride,
+  multiple = true,
+  disabled: buttonDisabled,
+  className,
+}: PromptAttachProps) {
+  const { disabled, loading, accept, onFiles } = usePromptContext();
+  const inputRef = React.useRef<HTMLInputElement>(null);
+  const isDisabled = disabled || loading || buttonDisabled || !onFiles;
+
+  const classes = [styles.attach, className].filter(Boolean).join(' ');
+
+  return (
+    <>
+      <button
+        type="button"
+        className={classes}
+        onClick={() => inputRef.current?.click()}
+        disabled={isDisabled}
+        aria-label={ariaLabel}
+      >
+        {children ?? <PlusIcon />}
+      </button>
+      {/* `hidden` rather than a class: the button above is the control, and
+          this must be out of the accessibility tree entirely or it reads as a
+          second, unlabelled one. A hidden input still opens its picker when
+          clicked programmatically. */}
+      <input
+        ref={inputRef}
+        type="file"
+        hidden
+        accept={acceptOverride ?? accept}
+        multiple={multiple}
+        onChange={(event) => {
+          const files = Array.from(event.target.files ?? []);
+          // Reset first, or picking the same file twice in a row is a no-op.
+          event.target.value = '';
+          onFiles?.(files);
+        }}
+      />
+    </>
+  );
+}
+
+/**
+ * A choice that scopes the submission — model, agent, tone, which project this
+ * runs against. `ModeButton` covers a setting you toggle; this covers one you
+ * pick from a list, which every non-trivial composer ends up needing.
+ *
+ * It is a `Select` throughout, in its ghost variant, so the popup, keyboard
+ * handling and selection state are the same ones the rest of the library uses.
+ * The trigger shows the current choice rather than a field label, because in a
+ * toolbar the choice is the only part worth the width — what kind of choice it
+ * is comes from the icon and the accessible name.
+ */
+function PromptSelect({
+  icon,
+  'aria-label': ariaLabel,
+  options,
+  children,
+  placeholder,
+  disabled: selectDisabled,
+  className,
+  ...selectProps
+}: PromptSelectProps) {
+  const { disabled, loading } = usePromptContext();
+  const classes = [styles.select, className].filter(Boolean).join(' ');
+
+  return (
+    <Select
+      {...selectProps}
+      size="sm"
+      variant="ghost"
+      options={options}
+      placeholder={placeholder}
+      disabled={disabled || loading || selectDisabled}
+    >
+      <Select.Trigger className={classes} icon={icon} aria-label={ariaLabel} />
+      {/* No children: Content renders what `options` describes, which is how a
+          hint or anything else the root knows about an option survives being
+          composed into a custom trigger. */}
+      <Select.Content>{children}</Select.Content>
+    </Select>
+  );
+}
+
 function PromptUsage({ children, className }: PromptUsageProps) {
   const classes = [styles.usage, className].filter(Boolean).join(' ');
   return <span className={classes}>{children}</span>;
@@ -486,6 +804,9 @@ export const Prompt = Object.assign(PromptRoot, {
   Info: PromptInfo,
   ActionButton: PromptActionButton,
   ModeButton: PromptModeButton,
+  Select: PromptSelect,
+  Attach: PromptAttach,
+  Attachments: PromptAttachments,
   Usage: PromptUsage,
   Submit: PromptSubmit,
 });
@@ -500,6 +821,9 @@ export {
   PromptInfo,
   PromptActionButton,
   PromptModeButton,
+  PromptSelect,
+  PromptAttach,
+  PromptAttachments,
   PromptUsage,
   PromptSubmit,
 };

package/src/components/Select/Select.contract.json

@@ -21,6 +21,7 @@
     "placeholder: string",
     "options: array",
     "size: sm|md|lg (default: md)",
+    "variant: field|ghost (default: field)",
     "className: string",
     "label: string",
     "helperText: string",
@@ -96,6 +97,13 @@
       "required": false,
       "values": ["sm", "md", "lg"]
     },
+    "variant": {
+      "type": "enum",
+      "description": "Visual treatment. \"ghost\" drops the field shell for a compact borderless control, for toolbars and dense rows. Pair with size=\"sm\".",
+      "default": "field",
+      "required": false,
+      "values": ["field", "ghost"]
+    },
     "className": {
       "type": "string",
       "description": "Wrapper class name",
@@ -225,8 +233,10 @@
       "placeholder: string - placeholder text",
       "disabled: boolean - disable select",
       "size: sm|md|lg (default: md)",
+      "variant: field|ghost (default: field) - ghost is borderless, for toolbars",
       "options: SelectOption[] - convenience API for simple option lists",
-      "maxVisibleItems: number - max visible options before scrolling (default 4)"
+      "maxVisibleItems: number - max visible options before scrolling (default 4)",
+      "Select.Trigger accepts an icon prop for a leading adornment"
     ],
     "a11yRules": ["A11Y_SELECT_KEYBOARD", "A11Y_SELECT_LABEL"]
   },

package/src/components/Select/Select.module.scss

@@ -34,6 +34,74 @@
   @include control-size("lg", "input");
 }
 
+// Ghost trigger — the same control with the field shell taken off, for
+// toolbars and dense rows where a bordered field would read as a form rather
+// than as a setting. Deliberately identical in padding, radius, type scale and
+// hover to the other compact controls that share those rows, so a select sits
+// among them as a sibling instead of a fourth vocabulary.
+//
+// Must be declared after `.trigger` and the size variants: it unsets what they
+// set, and they are all single-class selectors.
+.triggerGhost {
+  width: auto;
+  min-width: 0;
+  // No block padding: the control is exactly the target size tall and centres
+  // its own contents, the way a button does. Padding here instead would add to
+  // the line box and leave a ghost taller than every other control in the row
+  // — and taller again wherever the surface has scaled the target down.
+  height: auto;
+  gap: var(--fui-space-1, $fui-space-1);
+  padding: 0 var(--fui-space-2, $fui-space-2);
+  border: none;
+  border-radius: var(--fui-radius-md, $fui-radius-md);
+  background-color: transparent;
+  box-shadow: none;
+  color: var(--fui-text-secondary, $fui-text-secondary);
+  font-size: var(--fui-font-size-xs, $fui-font-size-xs);
+  font-weight: var(--fui-font-weight-medium, $fui-font-weight-medium);
+
+  &:hover:not(:disabled):not([data-disabled]) {
+    background-color: var(--fui-bg-hover, $fui-bg-hover);
+    color: var(--fui-text-primary, $fui-text-primary);
+  }
+
+  &:active:not(:disabled):not([data-disabled]) {
+    background-color: var(--fui-bg-active, $fui-bg-active);
+  }
+
+  // Open is a held state, not a hover: the control stays lit while the popup
+  // it owns is on screen.
+  &[data-popup-open] {
+    border-color: transparent;
+    background-color: var(--fui-bg-tertiary, $fui-bg-tertiary);
+    color: var(--fui-text-primary, $fui-text-primary);
+  }
+
+  // No shell to fill, so disabled reads as recession rather than as a
+  // greyed-out box.
+  &:disabled,
+  &[data-disabled] {
+    background-color: transparent;
+    opacity: 0.5;
+  }
+}
+
+// Ghost sizes to its content and may shrink; the wrapper has to allow both or
+// the trigger measures against its label and escapes a tight row.
+.wrapperGhost {
+  display: inline-flex;
+  min-width: 0;
+}
+
+// Leading adornment on the trigger
+.triggerIcon {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  color: var(--fui-text-tertiary, $fui-text-tertiary);
+}
+
 // Value display
 .value {
   flex: 1;
@@ -54,6 +122,14 @@
   color: var(--fui-text-tertiary, $fui-text-tertiary);
 }
 
+// The qualifier on an option — recessed, because it tells you which one this is
+// rather than being the thing you are choosing.
+.hint {
+  margin-inline-start: var(--fui-space-1, $fui-space-1);
+  color: var(--fui-text-tertiary, $fui-text-tertiary);
+  font-weight: var(--fui-font-weight-normal, $fui-font-weight-normal);
+}
+
 // Chevron icon
 .icon {
   display: flex;
@@ -83,22 +159,13 @@
   @include surface-elevated;
   @include popup-container;
 
-  border-color: var(--fui-form-group-border, $fui-border);
-
-  // Item height derived from text-base font + vertical padding
-  --_select-item-h: calc(
-    var(--fui-font-size-sm, #{$fui-font-size-sm}) *
-      var(--fui-line-height-normal, #{$fui-line-height-normal}) +
-      var(--fui-space-2, #{$fui-space-2}) * 2
-  );
+  @include popup-scroll-viewport;
 
+  border-color: var(--fui-form-group-border, $fui-border);
   min-width: var(--anchor-width);
-  // Show N items + half-peek scroll hint (default 4.5 items)
+  // Show N items + half-peek scroll hint (default 4.5 items).
   // !important needed to override Base UI's inline max-height: 100%
-  max-height: calc(
-    var(--_select-item-h) * var(--fui-select-max-items, 4.5) + var(--fui-space-1, #{$fui-space-1}) *
-      2
-  ) !important;
+  max-height: var(--_popup-scroll-max-h) !important;
   overflow-y: auto !important;
 
   // Animation