@langchain/macaw-components 1.0.0-beta.6 → 1.0.0-beta.8

package/dist/components/Attachment/Attachment.d.ts

@@ -12,6 +12,8 @@ export interface AttachmentProps extends Omit<ComponentPropsWithRef<'div'>, 'chi
     /** File-row height: sm=24px, md=32px, lg=48px. Thumbnails use larger tiles. */
     size?: 'sm' | 'md' | 'lg';
     status?: 'ready' | 'loading' | 'uploading' | 'error';
+    /** Disables opening, removal, and custom actions. */
+    disabled?: boolean;
     onOpen?: () => void;
     openLabel?: string;
     onRemove?: () => void;

package/dist/components/Attachment/Attachment.js

@@ -32,7 +32,7 @@ var SIZE_STYLES = {
 		thumbnail: "w-40"
 	}
 };
-var Attachment = forwardRef(function Attachment({ name, contentType, icon, preview, metadata, variant = "file", size = "md", status = "ready", onOpen, openLabel = `View ${name}`, onRemove, actions, className, ...props }, ref) {
+var Attachment = forwardRef(function Attachment({ name, contentType, icon, preview, metadata, variant = "file", size = "md", status = "ready", disabled = false, onOpen, openLabel = `View ${name}`, onRemove, actions, className, ...props }, ref) {
 	const statusId = useId();
 	const sizeStyles = SIZE_STYLES[size];
 	const isThumbnail = variant === "thumbnail";
@@ -47,6 +47,7 @@ var Attachment = forwardRef(function Attachment({ name, contentType, icon, previ
 		iconWeight: "regular",
 		iconClassName: isThumbnail ? size === "sm" ? "size-2.5" : "size-3" : size === "sm" ? "size-3" : "size-3.5",
 		label: `Remove ${name}`,
+		disabled,
 		color: "secondary",
 		variant: isThumbnail ? "normal" : "plain",
 		round: isThumbnail,
@@ -60,7 +61,7 @@ var Attachment = forwardRef(function Attachment({ name, contentType, icon, previ
 		size: size === "sm" ? "xxs" : size === "md" ? "xs" : "sm",
 		onClick: (event) => {
 			event.stopPropagation();
-			onRemove();
+			if (!disabled) onRemove();
 		}
 	}) : null;
 	const media = hasPreview ? preview : /* @__PURE__ */ jsx(Icon, {
@@ -124,8 +125,9 @@ var Attachment = forwardRef(function Attachment({ name, contentType, icon, previ
 		role: "group",
 		"aria-label": name,
 		...props,
+		"aria-disabled": disabled || void 0,
 		onClick: (event) => {
-			if (onOpen && event.target === event.currentTarget) {
+			if (!disabled && onOpen && event.target === event.currentTarget) {
 				event.stopPropagation();
 				onOpen();
 			}
@@ -134,23 +136,26 @@ var Attachment = forwardRef(function Attachment({ name, contentType, icon, previ
 			sizeStyles.thumbnail,
 			"group/attachment relative flex-col items-stretch",
 			size === "sm" ? "p-space-1" : "p-space-2"
-		] : [sizeStyles.height, sizeStyles.padding], status === "error" && "border-error", onOpen && "cursor-pointer", className),
+		] : [sizeStyles.height, sizeStyles.padding], status === "error" && "border-error", onOpen && !disabled && "cursor-pointer", disabled && "cursor-not-allowed opacity-50", className),
 		children: [
 			onOpen ? /* @__PURE__ */ jsx(Button, {
 				type: "button",
 				color: "secondary",
 				variant: "plain",
 				"aria-label": openLabel,
+				disabled,
 				"aria-describedby": description ? statusId : void 0,
 				className: cn("min-w-0 flex-1 justify-start p-0 text-left", isThumbnail ? "h-auto w-full max-w-full flex-none whitespace-normal" : "h-full"),
 				onClick: (event) => {
 					event.stopPropagation();
-					onOpen();
+					if (!disabled) onOpen();
 				},
 				children: content
 			}) : content,
 			isThumbnail && removeButton,
 			(actions != null || !isThumbnail && onRemove) && /* @__PURE__ */ jsxs("fieldset", {
+				disabled,
+				inert: disabled || void 0,
 				"aria-label": `Actions for ${name}`,
 				className: cn("m-0 flex min-w-0 max-w-full shrink-0 items-center justify-end gap-space-1 border-0 p-0", isThumbnail && "flex-wrap"),
 				onClick: (event) => event.stopPropagation(),

package/dist/components/Attachment/Attachment.js.map

@@ -1 +1 @@
-{"version":3,"file":"Attachment.js","names":[],"sources":["../../../src/components/Attachment/Attachment.tsx"],"sourcesContent":["import type { ComponentPropsWithRef, ReactNode } from 'react';\nimport { forwardRef, useId } from 'react';\n\nimport { FileIcon } from '@phosphor-icons/react/dist/ssr/File';\nimport { WarningCircleIcon } from '@phosphor-icons/react/dist/ssr/WarningCircle';\nimport { XIcon } from '@phosphor-icons/react/dist/ssr/X';\n\nimport { cn } from '../../utils/cn';\nimport {\n  CONTROL_SIZES,\n  VISUAL_ELEMENT_SIZES,\n} from '../../utils/componentSizes';\nimport { Button } from '../Button';\nimport { Icon, type IconComponent } from '../Icon';\nimport { IconButton } from '../IconButton';\nimport { SpinnerIcon } from '../Spinner';\nimport { Text } from '../Text';\nimport { getAttachmentIcon } from './render-attachment-icon';\n\nexport interface AttachmentProps extends Omit<\n  ComponentPropsWithRef<'div'>,\n  'children' | 'onClick'\n> {\n  name: string;\n  contentType?: string | null;\n  icon?: IconComponent;\n  /** Noninteractive thumbnail content. The consumer owns its source and lifecycle. */\n  preview?: ReactNode;\n  /** Secondary information, inline in compact rows and stacked in large rows. */\n  metadata?: ReactNode;\n  variant?: 'file' | 'thumbnail';\n  /** File-row height: sm=24px, md=32px, lg=48px. Thumbnails use larger tiles. */\n  size?: 'sm' | 'md' | 'lg';\n  status?: 'ready' | 'loading' | 'uploading' | 'error';\n  onOpen?: () => void;\n  openLabel?: string;\n  onRemove?: () => void;\n  /** Sibling controls; use xs/sm/md buttons or smaller for sm/md/lg rows. */\n  actions?: ReactNode;\n}\n\nconst SIZE_STYLES = {\n  sm: {\n    height: CONTROL_SIZES.sm.heightClassName,\n    padding: 'px-space-1',\n    media: VISUAL_ELEMENT_SIZES.xs.className,\n    thumbnail: 'w-24',\n  },\n  md: {\n    height: CONTROL_SIZES.md.heightClassName,\n    padding: 'px-space-1',\n    media: VISUAL_ELEMENT_SIZES.sm.className,\n    thumbnail: 'w-32',\n  },\n  lg: {\n    height: 'h-12',\n    padding: 'px-space-2',\n    media: 'size-9',\n    thumbnail: 'w-40',\n  },\n};\n\nexport const Attachment = forwardRef<HTMLDivElement, AttachmentProps>(\n  function Attachment(\n    {\n      name,\n      contentType,\n      icon,\n      preview,\n      metadata,\n      variant = 'file',\n      size = 'md',\n      status = 'ready',\n      onOpen,\n      openLabel = `View ${name}`,\n      onRemove,\n      actions,\n      className,\n      ...props\n    },\n    ref\n  ) {\n    const statusId = useId();\n    const sizeStyles = SIZE_STYLES[size];\n    const isThumbnail = variant === 'thumbnail';\n    const hasMediaBackground = isThumbnail || size !== 'sm';\n    const stackedText = isThumbnail || size === 'lg';\n    const isBusy = status === 'loading' || status === 'uploading';\n    const hasPreview = preview != null && status === 'ready';\n    const description =\n      status === 'uploading'\n        ? 'Uploading…'\n        : status === 'loading'\n          ? 'Loading attachment…'\n          : status === 'error'\n            ? 'Upload failed.'\n            : undefined;\n    const removeButton = onRemove ? (\n      <IconButton\n        type=\"button\"\n        icon={XIcon}\n        iconWeight=\"regular\"\n        iconClassName={\n          isThumbnail\n            ? size === 'sm'\n              ? 'size-2.5'\n              : 'size-3'\n            : size === 'sm'\n              ? 'size-3'\n              : 'size-3.5'\n        }\n        label={`Remove ${name}`}\n        color=\"secondary\"\n        variant={isThumbnail ? 'normal' : 'plain'}\n        round={isThumbnail}\n        className={cn(\n          isThumbnail && [\n            'absolute right-0 top-0',\n            'border-0 shadow-none hover:bg-elevated-hover',\n            'transition-opacity duration-fast motion-reduce:transition-none',\n            '[@media(hover:hover)]:group-[:not(:is(:hover,:focus-within))]/attachment:pointer-events-none',\n            '[@media(hover:hover)]:group-[:not(:is(:hover,:focus-within))]/attachment:opacity-0',\n          ]\n        )}\n        size={size === 'sm' ? 'xxs' : size === 'md' ? 'xs' : 'sm'}\n        onClick={(event) => {\n          event.stopPropagation();\n          onRemove();\n        }}\n      />\n    ) : null;\n    const media = hasPreview ? (\n      preview\n    ) : (\n      <Icon\n        aria-hidden\n        icon={\n          isBusy\n            ? SpinnerIcon\n            : status === 'error'\n              ? WarningCircleIcon\n              : (icon ?? getAttachmentIcon(contentType ?? null) ?? FileIcon)\n        }\n        size={size}\n        weight=\"regular\"\n        color={\n          status === 'error'\n            ? 'error'\n            : hasMediaBackground\n              ? 'neutral'\n              : undefined\n        }\n        className={cn(\n          'rounded-xs',\n          size === 'sm' && sizeStyles.media,\n          !hasMediaBackground && 'bg-transparent dark:bg-transparent',\n          status !== 'error' && [\n            'text-icon-secondary',\n            hasMediaBackground && 'bg-surface-level-2',\n          ]\n        )}\n      />\n    );\n    const content = (\n      <span\n        className={cn(\n          'flex min-w-0 flex-1 items-center',\n          size === 'sm' && !isThumbnail ? 'gap-space-1' : 'gap-space-2',\n          isThumbnail && 'w-full max-w-full flex-none flex-col items-stretch'\n        )}\n      >\n        {hasPreview || isThumbnail ? (\n          <span\n            aria-hidden\n            className={cn(\n              'flex shrink-0 items-center justify-center overflow-hidden rounded-xs [&>img]:size-full [&>img]:object-cover',\n              isThumbnail && status === 'error'\n                ? 'bg-error-subtle dark:bg-error'\n                : hasMediaBackground && 'bg-surface-level-2',\n              isThumbnail\n                ? 'relative aspect-square w-full [&>img]:absolute [&>img]:inset-0'\n                : sizeStyles.media\n            )}\n          >\n            {media}\n          </span>\n        ) : (\n          media\n        )}\n        <span\n          className={cn(\n            'flex min-w-0 flex-1',\n            stackedText ? 'flex-col gap-space-1' : 'items-baseline gap-space-2',\n            isThumbnail && 'w-full max-w-full flex-none'\n          )}\n        >\n          <Text\n            as=\"span\"\n            dir=\"rtl\"\n            variant={size === 'sm' ? 'xs' : size === 'md' ? 'sm' : 'md'}\n            className={cn(\n              'min-w-0 max-w-48 truncate text-left text-primary',\n              isThumbnail && 'w-full max-w-full'\n            )}\n            title={name}\n          >\n            <bdi dir=\"ltr\">{name}</bdi>\n          </Text>\n          {metadata != null && !description && (\n            <Text\n              as=\"span\"\n              variant=\"xs\"\n              color=\"quaternary\"\n              className={cn(\n                'min-w-0 max-w-48 truncate',\n                isThumbnail && 'w-full max-w-full'\n              )}\n              title={typeof metadata === 'string' ? metadata : undefined}\n            >\n              {metadata}\n            </Text>\n          )}\n          <span\n            id={statusId}\n            role=\"status\"\n            aria-live=\"polite\"\n            aria-atomic=\"true\"\n            className={cn(\n              description ? 'min-w-0 max-w-full' : 'sr-only',\n              description &&\n                status === 'error' &&\n                !stackedText &&\n                'max-w-[75%] shrink-0 grow'\n            )}\n          >\n            {description && (\n              <Text\n                as=\"span\"\n                variant=\"xs\"\n                title={description}\n                className={cn(\n                  'block truncate text-tertiary',\n                  status === 'error' && 'text-error-secondary'\n                )}\n              >\n                <span className=\"sr-only\">{name}: </span>\n                {description}\n              </Text>\n            )}\n          </span>\n        </span>\n      </span>\n    );\n\n    return (\n      <div\n        ref={ref}\n        role=\"group\"\n        aria-label={name}\n        {...props}\n        onClick={(event) => {\n          // Extend the preview button to the card's padding and gaps only.\n          if (onOpen && event.target === event.currentTarget) {\n            event.stopPropagation();\n            onOpen();\n          }\n        }}\n        className={cn(\n          'box-border flex min-w-0 max-w-full shrink-0 items-center gap-space-2 rounded-xs border border-subtle bg-surface-level-1',\n          isThumbnail\n            ? [\n                sizeStyles.thumbnail,\n                'group/attachment relative flex-col items-stretch',\n                size === 'sm' ? 'p-space-1' : 'p-space-2',\n              ]\n            : [sizeStyles.height, sizeStyles.padding],\n          status === 'error' && 'border-error',\n          onOpen && 'cursor-pointer',\n          className\n        )}\n      >\n        {onOpen ? (\n          <Button\n            type=\"button\"\n            color=\"secondary\"\n            variant=\"plain\"\n            aria-label={openLabel}\n            aria-describedby={description ? statusId : undefined}\n            className={cn(\n              'min-w-0 flex-1 justify-start p-0 text-left',\n              isThumbnail\n                ? 'h-auto w-full max-w-full flex-none whitespace-normal'\n                : 'h-full'\n            )}\n            onClick={(event) => {\n              event.stopPropagation();\n              onOpen();\n            }}\n          >\n            {content}\n          </Button>\n        ) : (\n          content\n        )}\n        {isThumbnail && removeButton}\n        {(actions != null || (!isThumbnail && onRemove)) && (\n          <fieldset\n            aria-label={`Actions for ${name}`}\n            className={cn(\n              'm-0 flex min-w-0 max-w-full shrink-0 items-center justify-end gap-space-1 border-0 p-0',\n              isThumbnail && 'flex-wrap'\n            )}\n            onClick={(event) => event.stopPropagation()}\n          >\n            {actions}\n            {!isThumbnail && removeButton}\n          </fieldset>\n        )}\n      </div>\n    );\n  }\n);\n"],"mappings":"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"}
+{"version":3,"file":"Attachment.js","names":[],"sources":["../../../src/components/Attachment/Attachment.tsx"],"sourcesContent":["import type { ComponentPropsWithRef, ReactNode } from 'react';\nimport { forwardRef, useId } from 'react';\n\nimport { FileIcon } from '@phosphor-icons/react/dist/ssr/File';\nimport { WarningCircleIcon } from '@phosphor-icons/react/dist/ssr/WarningCircle';\nimport { XIcon } from '@phosphor-icons/react/dist/ssr/X';\n\nimport { cn } from '../../utils/cn';\nimport {\n  CONTROL_SIZES,\n  VISUAL_ELEMENT_SIZES,\n} from '../../utils/componentSizes';\nimport { Button } from '../Button';\nimport { Icon, type IconComponent } from '../Icon';\nimport { IconButton } from '../IconButton';\nimport { SpinnerIcon } from '../Spinner';\nimport { Text } from '../Text';\nimport { getAttachmentIcon } from './render-attachment-icon';\n\nexport interface AttachmentProps extends Omit<\n  ComponentPropsWithRef<'div'>,\n  'children' | 'onClick'\n> {\n  name: string;\n  contentType?: string | null;\n  icon?: IconComponent;\n  /** Noninteractive thumbnail content. The consumer owns its source and lifecycle. */\n  preview?: ReactNode;\n  /** Secondary information, inline in compact rows and stacked in large rows. */\n  metadata?: ReactNode;\n  variant?: 'file' | 'thumbnail';\n  /** File-row height: sm=24px, md=32px, lg=48px. Thumbnails use larger tiles. */\n  size?: 'sm' | 'md' | 'lg';\n  status?: 'ready' | 'loading' | 'uploading' | 'error';\n  /** Disables opening, removal, and custom actions. */\n  disabled?: boolean;\n  onOpen?: () => void;\n  openLabel?: string;\n  onRemove?: () => void;\n  /** Sibling controls; use xs/sm/md buttons or smaller for sm/md/lg rows. */\n  actions?: ReactNode;\n}\n\nconst SIZE_STYLES = {\n  sm: {\n    height: CONTROL_SIZES.sm.heightClassName,\n    padding: 'px-space-1',\n    media: VISUAL_ELEMENT_SIZES.xs.className,\n    thumbnail: 'w-24',\n  },\n  md: {\n    height: CONTROL_SIZES.md.heightClassName,\n    padding: 'px-space-1',\n    media: VISUAL_ELEMENT_SIZES.sm.className,\n    thumbnail: 'w-32',\n  },\n  lg: {\n    height: 'h-12',\n    padding: 'px-space-2',\n    media: 'size-9',\n    thumbnail: 'w-40',\n  },\n};\n\nexport const Attachment = forwardRef<HTMLDivElement, AttachmentProps>(\n  function Attachment(\n    {\n      name,\n      contentType,\n      icon,\n      preview,\n      metadata,\n      variant = 'file',\n      size = 'md',\n      status = 'ready',\n      disabled = false,\n      onOpen,\n      openLabel = `View ${name}`,\n      onRemove,\n      actions,\n      className,\n      ...props\n    },\n    ref\n  ) {\n    const statusId = useId();\n    const sizeStyles = SIZE_STYLES[size];\n    const isThumbnail = variant === 'thumbnail';\n    const hasMediaBackground = isThumbnail || size !== 'sm';\n    const stackedText = isThumbnail || size === 'lg';\n    const isBusy = status === 'loading' || status === 'uploading';\n    const hasPreview = preview != null && status === 'ready';\n    const description =\n      status === 'uploading'\n        ? 'Uploading…'\n        : status === 'loading'\n          ? 'Loading attachment…'\n          : status === 'error'\n            ? 'Upload failed.'\n            : undefined;\n    const removeButton = onRemove ? (\n      <IconButton\n        type=\"button\"\n        icon={XIcon}\n        iconWeight=\"regular\"\n        iconClassName={\n          isThumbnail\n            ? size === 'sm'\n              ? 'size-2.5'\n              : 'size-3'\n            : size === 'sm'\n              ? 'size-3'\n              : 'size-3.5'\n        }\n        label={`Remove ${name}`}\n        disabled={disabled}\n        color=\"secondary\"\n        variant={isThumbnail ? 'normal' : 'plain'}\n        round={isThumbnail}\n        className={cn(\n          isThumbnail && [\n            'absolute right-0 top-0',\n            'border-0 shadow-none hover:bg-elevated-hover',\n            'transition-opacity duration-fast motion-reduce:transition-none',\n            '[@media(hover:hover)]:group-[:not(:is(:hover,:focus-within))]/attachment:pointer-events-none',\n            '[@media(hover:hover)]:group-[:not(:is(:hover,:focus-within))]/attachment:opacity-0',\n          ]\n        )}\n        size={size === 'sm' ? 'xxs' : size === 'md' ? 'xs' : 'sm'}\n        onClick={(event) => {\n          event.stopPropagation();\n          if (!disabled) onRemove();\n        }}\n      />\n    ) : null;\n    const media = hasPreview ? (\n      preview\n    ) : (\n      <Icon\n        aria-hidden\n        icon={\n          isBusy\n            ? SpinnerIcon\n            : status === 'error'\n              ? WarningCircleIcon\n              : (icon ?? getAttachmentIcon(contentType ?? null) ?? FileIcon)\n        }\n        size={size}\n        weight=\"regular\"\n        color={\n          status === 'error'\n            ? 'error'\n            : hasMediaBackground\n              ? 'neutral'\n              : undefined\n        }\n        className={cn(\n          'rounded-xs',\n          size === 'sm' && sizeStyles.media,\n          !hasMediaBackground && 'bg-transparent dark:bg-transparent',\n          status !== 'error' && [\n            'text-icon-secondary',\n            hasMediaBackground && 'bg-surface-level-2',\n          ]\n        )}\n      />\n    );\n    const content = (\n      <span\n        className={cn(\n          'flex min-w-0 flex-1 items-center',\n          size === 'sm' && !isThumbnail ? 'gap-space-1' : 'gap-space-2',\n          isThumbnail && 'w-full max-w-full flex-none flex-col items-stretch'\n        )}\n      >\n        {hasPreview || isThumbnail ? (\n          <span\n            aria-hidden\n            className={cn(\n              'flex shrink-0 items-center justify-center overflow-hidden rounded-xs [&>img]:size-full [&>img]:object-cover',\n              isThumbnail && status === 'error'\n                ? 'bg-error-subtle dark:bg-error'\n                : hasMediaBackground && 'bg-surface-level-2',\n              isThumbnail\n                ? 'relative aspect-square w-full [&>img]:absolute [&>img]:inset-0'\n                : sizeStyles.media\n            )}\n          >\n            {media}\n          </span>\n        ) : (\n          media\n        )}\n        <span\n          className={cn(\n            'flex min-w-0 flex-1',\n            stackedText ? 'flex-col gap-space-1' : 'items-baseline gap-space-2',\n            isThumbnail && 'w-full max-w-full flex-none'\n          )}\n        >\n          <Text\n            as=\"span\"\n            dir=\"rtl\"\n            variant={size === 'sm' ? 'xs' : size === 'md' ? 'sm' : 'md'}\n            className={cn(\n              'min-w-0 max-w-48 truncate text-left text-primary',\n              isThumbnail && 'w-full max-w-full'\n            )}\n            title={name}\n          >\n            <bdi dir=\"ltr\">{name}</bdi>\n          </Text>\n          {metadata != null && !description && (\n            <Text\n              as=\"span\"\n              variant=\"xs\"\n              color=\"quaternary\"\n              className={cn(\n                'min-w-0 max-w-48 truncate',\n                isThumbnail && 'w-full max-w-full'\n              )}\n              title={typeof metadata === 'string' ? metadata : undefined}\n            >\n              {metadata}\n            </Text>\n          )}\n          <span\n            id={statusId}\n            role=\"status\"\n            aria-live=\"polite\"\n            aria-atomic=\"true\"\n            className={cn(\n              description ? 'min-w-0 max-w-full' : 'sr-only',\n              description &&\n                status === 'error' &&\n                !stackedText &&\n                'max-w-[75%] shrink-0 grow'\n            )}\n          >\n            {description && (\n              <Text\n                as=\"span\"\n                variant=\"xs\"\n                title={description}\n                className={cn(\n                  'block truncate text-tertiary',\n                  status === 'error' && 'text-error-secondary'\n                )}\n              >\n                <span className=\"sr-only\">{name}: </span>\n                {description}\n              </Text>\n            )}\n          </span>\n        </span>\n      </span>\n    );\n\n    return (\n      <div\n        ref={ref}\n        role=\"group\"\n        aria-label={name}\n        {...props}\n        aria-disabled={disabled || undefined}\n        onClick={(event) => {\n          // Extend the preview button to the card's padding and gaps only.\n          if (!disabled && onOpen && event.target === event.currentTarget) {\n            event.stopPropagation();\n            onOpen();\n          }\n        }}\n        className={cn(\n          'box-border flex min-w-0 max-w-full shrink-0 items-center gap-space-2 rounded-xs border border-subtle bg-surface-level-1',\n          isThumbnail\n            ? [\n                sizeStyles.thumbnail,\n                'group/attachment relative flex-col items-stretch',\n                size === 'sm' ? 'p-space-1' : 'p-space-2',\n              ]\n            : [sizeStyles.height, sizeStyles.padding],\n          status === 'error' && 'border-error',\n          onOpen && !disabled && 'cursor-pointer',\n          disabled && 'cursor-not-allowed opacity-50',\n          className\n        )}\n      >\n        {onOpen ? (\n          <Button\n            type=\"button\"\n            color=\"secondary\"\n            variant=\"plain\"\n            aria-label={openLabel}\n            disabled={disabled}\n            aria-describedby={description ? statusId : undefined}\n            className={cn(\n              'min-w-0 flex-1 justify-start p-0 text-left',\n              isThumbnail\n                ? 'h-auto w-full max-w-full flex-none whitespace-normal'\n                : 'h-full'\n            )}\n            onClick={(event) => {\n              event.stopPropagation();\n              if (!disabled) onOpen();\n            }}\n          >\n            {content}\n          </Button>\n        ) : (\n          content\n        )}\n        {isThumbnail && removeButton}\n        {(actions != null || (!isThumbnail && onRemove)) && (\n          <fieldset\n            disabled={disabled}\n            inert={disabled || undefined}\n            aria-label={`Actions for ${name}`}\n            className={cn(\n              'm-0 flex min-w-0 max-w-full shrink-0 items-center justify-end gap-space-1 border-0 p-0',\n              isThumbnail && 'flex-wrap'\n            )}\n            onClick={(event) => event.stopPropagation()}\n          >\n            {actions}\n            {!isThumbnail && removeButton}\n          </fieldset>\n        )}\n      </div>\n    );\n  }\n);\n"],"mappings":"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"}

package/dist/components/HeatmapChart/HeatmapBlock.d.ts

@@ -0,0 +1,22 @@
+import { type ComponentPropsWithoutRef } from 'react';
+declare const BLOCK_SIZES: {
+    sm: number;
+    md: number;
+    lg: number;
+};
+declare const BLOCK_COLORS: {
+    yellow: string;
+    green: string;
+    red: string;
+    blue: string;
+};
+export type HeatmapBlockSize = keyof typeof BLOCK_SIZES;
+export type HeatmapBlockColor = keyof typeof BLOCK_COLORS;
+export interface HeatmapBlockProps extends Pick<ComponentPropsWithoutRef<'span'>, 'tabIndex' | 'onFocus' | 'onKeyDown'> {
+    opacity: number;
+    size?: HeatmapBlockSize;
+    color?: HeatmapBlockColor;
+    label?: string;
+}
+export declare const HeatmapBlock: import("react").ForwardRefExoticComponent<HeatmapBlockProps & import("react").RefAttributes<HTMLSpanElement>>;
+export {};

package/dist/components/HeatmapChart/HeatmapBlock.js

@@ -0,0 +1,54 @@
+import { Tooltip } from "../Tooltip/Tooltip.js";
+import { clamp } from "../../utils/clamp.js";
+import { getCategoricalFillChartColor } from "../../utils/chartColors.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region packages/components/src/components/HeatmapChart/HeatmapBlock.tsx
+var BLOCK_SIZES = {
+	sm: 12,
+	md: 16,
+	lg: 20
+};
+var BLOCK_COLORS = {
+	yellow: getCategoricalFillChartColor(4),
+	green: getCategoricalFillChartColor(2),
+	red: getCategoricalFillChartColor(7),
+	blue: getCategoricalFillChartColor(6)
+};
+var HeatmapBlock = forwardRef(function HeatmapBlock({ opacity, size = "md", color = "green", label, tabIndex = 0, onFocus, onKeyDown }, ref) {
+	const value = Number.isFinite(opacity) ? clamp(opacity, 0, 100) : 0;
+	const dimension = BLOCK_SIZES[size];
+	const accessibleLabel = label ?? `${value}%`;
+	return /* @__PURE__ */ jsx(Tooltip, {
+		title: accessibleLabel,
+		disableHoverableContent: false,
+		children: /* @__PURE__ */ jsx("span", {
+			ref,
+			role: "img",
+			"aria-label": accessibleLabel,
+			tabIndex,
+			onFocus,
+			onKeyDown,
+			className: "inline-flex shrink-0 text-primary focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2",
+			style: {
+				width: dimension,
+				height: dimension
+			},
+			children: /* @__PURE__ */ jsx("svg", {
+				width: dimension,
+				height: dimension,
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ jsx("rect", {
+					width: dimension,
+					height: dimension,
+					fill: BLOCK_COLORS[color],
+					fillOpacity: value / 100
+				})
+			})
+		})
+	});
+});
+//#endregion
+export { HeatmapBlock };
+
+//# sourceMappingURL=HeatmapBlock.js.map

package/dist/components/HeatmapChart/HeatmapBlock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeatmapBlock.js","names":[],"sources":["../../../src/components/HeatmapChart/HeatmapBlock.tsx"],"sourcesContent":["import { forwardRef, type ComponentPropsWithoutRef } from 'react';\n\nimport { getCategoricalFillChartColor } from '../../utils/chartColors';\nimport { clamp } from '../../utils/clamp';\nimport { Tooltip } from '../Tooltip';\n\nconst BLOCK_SIZES = { sm: 12, md: 16, lg: 20 };\nconst BLOCK_COLORS = {\n  yellow: getCategoricalFillChartColor(4),\n  green: getCategoricalFillChartColor(2),\n  red: getCategoricalFillChartColor(7),\n  blue: getCategoricalFillChartColor(6),\n};\n\nexport type HeatmapBlockSize = keyof typeof BLOCK_SIZES;\nexport type HeatmapBlockColor = keyof typeof BLOCK_COLORS;\n\nexport interface HeatmapBlockProps extends Pick<\n  ComponentPropsWithoutRef<'span'>,\n  'tabIndex' | 'onFocus' | 'onKeyDown'\n> {\n  opacity: number;\n  size?: HeatmapBlockSize;\n  color?: HeatmapBlockColor;\n  label?: string;\n}\n\nexport const HeatmapBlock = forwardRef<HTMLSpanElement, HeatmapBlockProps>(\n  function HeatmapBlock(\n    {\n      opacity,\n      size = 'md',\n      color = 'green',\n      label,\n      tabIndex = 0,\n      onFocus,\n      onKeyDown,\n    },\n    ref\n  ) {\n    const value = Number.isFinite(opacity) ? clamp(opacity, 0, 100) : 0;\n    const dimension = BLOCK_SIZES[size];\n    const accessibleLabel = label ?? `${value}%`;\n\n    return (\n      <Tooltip title={accessibleLabel} disableHoverableContent={false}>\n        <span\n          ref={ref}\n          role=\"img\"\n          aria-label={accessibleLabel}\n          tabIndex={tabIndex}\n          onFocus={onFocus}\n          onKeyDown={onKeyDown}\n          className=\"inline-flex shrink-0 text-primary focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2\"\n          style={{ width: dimension, height: dimension }}\n        >\n          <svg width={dimension} height={dimension} aria-hidden=\"true\">\n            <rect\n              width={dimension}\n              height={dimension}\n              fill={BLOCK_COLORS[color]}\n              fillOpacity={value / 100}\n            />\n          </svg>\n        </span>\n      </Tooltip>\n    );\n  }\n);\n"],"mappings":";;;;;;AAMA,IAAM,cAAc;CAAE,IAAI;CAAI,IAAI;CAAI,IAAI;AAAG;AAC7C,IAAM,eAAe;CACnB,QAAQ,6BAA6B,CAAC;CACtC,OAAO,6BAA6B,CAAC;CACrC,KAAK,6BAA6B,CAAC;CACnC,MAAM,6BAA6B,CAAC;AACtC;AAeA,IAAa,eAAe,WAC1B,SAAS,aACP,EACE,SACA,OAAO,MACP,QAAQ,SACR,OACA,WAAW,GACX,SACA,aAEF,KACA;CACA,MAAM,QAAQ,OAAO,SAAS,OAAO,IAAI,MAAM,SAAS,GAAG,GAAG,IAAI;CAClE,MAAM,YAAY,YAAY;CAC9B,MAAM,kBAAkB,SAAS,GAAG,MAAM;CAE1C,OACE,oBAAC,SAAD;EAAS,OAAO;EAAiB,yBAAyB;EACxD,UAAA,oBAAC,QAAD;GACO;GACL,MAAK;GACL,cAAY;GACF;GACD;GACE;GACX,WAAU;GACV,OAAO;IAAE,OAAO;IAAW,QAAQ;GAAU;GAE7C,UAAA,oBAAC,OAAD;IAAK,OAAO;IAAW,QAAQ;IAAW,eAAY;IACpD,UAAA,oBAAC,QAAD;KACE,OAAO;KACP,QAAQ;KACR,MAAM,aAAa;KACnB,aAAa,QAAQ;IACtB,CAAA;GACE,CAAA;EACD,CAAA;CACC,CAAA;AAEb,CACF"}

package/dist/components/HeatmapChart/HeatmapChart.d.ts

@@ -0,0 +1,9 @@
+import { type HTMLAttributes } from 'react';
+import { type HeatmapBlockProps } from './HeatmapBlock.js';
+export interface HeatmapChartProps extends HTMLAttributes<HTMLDivElement> {
+    data: readonly (readonly number[])[];
+    size?: HeatmapBlockProps['size'];
+    color?: HeatmapBlockProps['color'];
+    getBlockLabel?: (value: number, row: number, column: number) => string;
+}
+export declare function HeatmapChart({ data, size, color, getBlockLabel, className, 'aria-label': ariaLabel, ...props }: HeatmapChartProps): import("react").JSX.Element;

package/dist/components/HeatmapChart/HeatmapChart.js

@@ -0,0 +1,79 @@
+import { cn } from "../../utils/cn.js";
+import { HeatmapBlock } from "./HeatmapBlock.js";
+import { useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region packages/components/src/components/HeatmapChart/HeatmapChart.tsx
+function HeatmapChart({ data, size = "md", color = "green", getBlockLabel = (value, row, column) => `Row ${row + 1}, column ${column + 1}: ${value}%`, className, "aria-label": ariaLabel = "Heatmap", ...props }) {
+	const [focusedIndex, setFocusedIndex] = useState(0);
+	const cellRefs = useRef([]);
+	let cellCount = 0;
+	const rowOffsets = data.map((row) => {
+		const offset = cellCount;
+		cellCount += row.length;
+		return offset;
+	});
+	const activeIndex = Math.min(focusedIndex, Math.max(0, cellCount - 1));
+	function moveFocus(event, row, column) {
+		const offset = rowOffsets[row];
+		const length = data[row].length;
+		let nextIndex = offset + column;
+		switch (event.key) {
+			case "ArrowLeft":
+				nextIndex = offset + Math.max(0, column - 1);
+				break;
+			case "ArrowRight":
+				nextIndex = offset + Math.min(length - 1, column + 1);
+				break;
+			case "ArrowUp":
+			case "ArrowDown": {
+				const direction = event.key === "ArrowUp" ? -1 : 1;
+				let nextRow = row + direction;
+				while (nextRow >= 0 && nextRow < data.length) {
+					if (data[nextRow].length > 0) {
+						nextIndex = rowOffsets[nextRow] + Math.min(column, data[nextRow].length - 1);
+						break;
+					}
+					nextRow += direction;
+				}
+				break;
+			}
+			case "Home":
+				nextIndex = event.ctrlKey ? 0 : offset;
+				break;
+			case "End":
+				nextIndex = event.ctrlKey ? cellCount - 1 : offset + length - 1;
+				break;
+			default: return;
+		}
+		event.preventDefault();
+		cellRefs.current[nextIndex]?.focus();
+	}
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		role: "group",
+		"aria-label": ariaLabel,
+		className: cn("w-full min-w-0 overflow-x-auto", className),
+		children: /* @__PURE__ */ jsx("div", {
+			className: "flex w-max flex-col gap-space-1 p-space-1",
+			children: data.map((row, rowIndex) => /* @__PURE__ */ jsx("div", {
+				className: "flex gap-space-1",
+				children: row.map((value, columnIndex) => /* @__PURE__ */ jsx(HeatmapBlock, {
+					ref: (element) => {
+						cellRefs.current[rowOffsets[rowIndex] + columnIndex] = element;
+					},
+					tabIndex: rowOffsets[rowIndex] + columnIndex === activeIndex ? 0 : -1,
+					onFocus: () => setFocusedIndex(rowOffsets[rowIndex] + columnIndex),
+					onKeyDown: (event) => moveFocus(event, rowIndex, columnIndex),
+					opacity: value,
+					size,
+					color,
+					label: getBlockLabel(value, rowIndex, columnIndex)
+				}, columnIndex))
+			}, rowIndex))
+		})
+	});
+}
+//#endregion
+export { HeatmapChart };
+
+//# sourceMappingURL=HeatmapChart.js.map

package/dist/components/HeatmapChart/HeatmapChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeatmapChart.js","names":[],"sources":["../../../src/components/HeatmapChart/HeatmapChart.tsx"],"sourcesContent":["import {\n  useRef,\n  useState,\n  type HTMLAttributes,\n  type KeyboardEvent,\n} from 'react';\n\nimport { cn } from '../../utils/cn';\nimport { HeatmapBlock, type HeatmapBlockProps } from './HeatmapBlock';\n\nexport interface HeatmapChartProps extends HTMLAttributes<HTMLDivElement> {\n  data: readonly (readonly number[])[];\n  size?: HeatmapBlockProps['size'];\n  color?: HeatmapBlockProps['color'];\n  getBlockLabel?: (value: number, row: number, column: number) => string;\n}\n\nexport function HeatmapChart({\n  data,\n  size = 'md',\n  color = 'green',\n  getBlockLabel = (value, row, column) =>\n    `Row ${row + 1}, column ${column + 1}: ${value}%`,\n  className,\n  'aria-label': ariaLabel = 'Heatmap',\n  ...props\n}: HeatmapChartProps) {\n  const [focusedIndex, setFocusedIndex] = useState(0);\n  const cellRefs = useRef<(HTMLSpanElement | null)[]>([]);\n  let cellCount = 0;\n  const rowOffsets = data.map((row) => {\n    const offset = cellCount;\n    cellCount += row.length;\n    return offset;\n  });\n  const activeIndex = Math.min(focusedIndex, Math.max(0, cellCount - 1));\n\n  function moveFocus(\n    event: KeyboardEvent<HTMLSpanElement>,\n    row: number,\n    column: number\n  ) {\n    const offset = rowOffsets[row];\n    const length = data[row].length;\n    let nextIndex = offset + column;\n    switch (event.key) {\n      case 'ArrowLeft':\n        nextIndex = offset + Math.max(0, column - 1);\n        break;\n      case 'ArrowRight':\n        nextIndex = offset + Math.min(length - 1, column + 1);\n        break;\n      case 'ArrowUp':\n      case 'ArrowDown': {\n        const direction = event.key === 'ArrowUp' ? -1 : 1;\n        let nextRow = row + direction;\n        while (nextRow >= 0 && nextRow < data.length) {\n          if (data[nextRow].length > 0) {\n            nextIndex =\n              rowOffsets[nextRow] + Math.min(column, data[nextRow].length - 1);\n            break;\n          }\n          nextRow += direction;\n        }\n        break;\n      }\n      case 'Home':\n        nextIndex = event.ctrlKey ? 0 : offset;\n        break;\n      case 'End':\n        nextIndex = event.ctrlKey ? cellCount - 1 : offset + length - 1;\n        break;\n      default:\n        return;\n    }\n    event.preventDefault();\n    cellRefs.current[nextIndex]?.focus();\n  }\n\n  return (\n    <div\n      {...props}\n      role=\"group\"\n      aria-label={ariaLabel}\n      className={cn('w-full min-w-0 overflow-x-auto', className)}\n    >\n      <div className=\"flex w-max flex-col gap-space-1 p-space-1\">\n        {data.map((row, rowIndex) => (\n          <div key={rowIndex} className=\"flex gap-space-1\">\n            {row.map((value, columnIndex) => (\n              <HeatmapBlock\n                key={columnIndex}\n                ref={(element) => {\n                  cellRefs.current[rowOffsets[rowIndex] + columnIndex] =\n                    element;\n                }}\n                tabIndex={\n                  rowOffsets[rowIndex] + columnIndex === activeIndex ? 0 : -1\n                }\n                onFocus={() =>\n                  setFocusedIndex(rowOffsets[rowIndex] + columnIndex)\n                }\n                onKeyDown={(event) => moveFocus(event, rowIndex, columnIndex)}\n                opacity={value}\n                size={size}\n                color={color}\n                label={getBlockLabel(value, rowIndex, columnIndex)}\n              />\n            ))}\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;AAiBA,SAAgB,aAAa,EAC3B,MACA,OAAO,MACP,QAAQ,SACR,iBAAiB,OAAO,KAAK,WAC3B,OAAO,MAAM,EAAE,WAAW,SAAS,EAAE,IAAI,MAAM,IACjD,WACA,cAAc,YAAY,WAC1B,GAAG,SACiB;CACpB,MAAM,CAAC,cAAc,mBAAmB,SAAS,CAAC;CAClD,MAAM,WAAW,OAAmC,CAAC,CAAC;CACtD,IAAI,YAAY;CAChB,MAAM,aAAa,KAAK,KAAK,QAAQ;EACnC,MAAM,SAAS;EACf,aAAa,IAAI;EACjB,OAAO;CACT,CAAC;CACD,MAAM,cAAc,KAAK,IAAI,cAAc,KAAK,IAAI,GAAG,YAAY,CAAC,CAAC;CAErE,SAAS,UACP,OACA,KACA,QACA;EACA,MAAM,SAAS,WAAW;EAC1B,MAAM,SAAS,KAAK,IAAI,CAAC;EACzB,IAAI,YAAY,SAAS;EACzB,QAAQ,MAAM,KAAd;GACE,KAAK;IACH,YAAY,SAAS,KAAK,IAAI,GAAG,SAAS,CAAC;IAC3C;GACF,KAAK;IACH,YAAY,SAAS,KAAK,IAAI,SAAS,GAAG,SAAS,CAAC;IACpD;GACF,KAAK;GACL,KAAK,aAAa;IAChB,MAAM,YAAY,MAAM,QAAQ,YAAY,KAAK;IACjD,IAAI,UAAU,MAAM;IACpB,OAAO,WAAW,KAAK,UAAU,KAAK,QAAQ;KAC5C,IAAI,KAAK,QAAQ,CAAC,SAAS,GAAG;MAC5B,YACE,WAAW,WAAW,KAAK,IAAI,QAAQ,KAAK,QAAQ,CAAC,SAAS,CAAC;MACjE;KACF;KACA,WAAW;IACb;IACA;GACF;GACA,KAAK;IACH,YAAY,MAAM,UAAU,IAAI;IAChC;GACF,KAAK;IACH,YAAY,MAAM,UAAU,YAAY,IAAI,SAAS,SAAS;IAC9D;GACF,SACE;EACJ;EACA,MAAM,eAAe;EACrB,SAAS,QAAQ,UAAU,EAAE,MAAM;CACrC;CAEA,OACE,oBAAC,OAAD;EACE,GAAI;EACJ,MAAK;EACL,cAAY;EACZ,WAAW,GAAG,kCAAkC,SAAS;EAEzD,UAAA,oBAAC,OAAD;GAAK,WAAU;GACZ,UAAA,KAAK,KAAK,KAAK,aACd,oBAAC,OAAD;IAAoB,WAAU;IAC3B,UAAA,IAAI,KAAK,OAAO,gBACf,oBAAC,cAAD;KAEE,MAAM,YAAY;MAChB,SAAS,QAAQ,WAAW,YAAY,eACtC;KACJ;KACA,UACE,WAAW,YAAY,gBAAgB,cAAc,IAAI;KAE3D,eACE,gBAAgB,WAAW,YAAY,WAAW;KAEpD,YAAY,UAAU,UAAU,OAAO,UAAU,WAAW;KAC5D,SAAS;KACH;KACC;KACP,OAAO,cAAc,OAAO,UAAU,WAAW;IAClD,GAhBM,WAgBN,CACF;GACE,GArBK,QAqBL,CACN;EACE,CAAA;CACF,CAAA;AAET"}

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

@@ -0,0 +1,4 @@
+export { HeatmapChart } from './HeatmapChart.js';
+export type { HeatmapChartProps } from './HeatmapChart.js';
+export { HeatmapBlock } from './HeatmapBlock.js';
+export type { HeatmapBlockProps, HeatmapBlockSize, HeatmapBlockColor, } from './HeatmapBlock.js';

package/dist/components/HeatmapChart/index.js

@@ -0,0 +1,3 @@
+import { HeatmapBlock } from "./HeatmapBlock.js";
+import { HeatmapChart } from "./HeatmapChart.js";
+export { HeatmapBlock, HeatmapChart };

package/dist/components/ThinkingState/LoadingIndicator.d.ts

@@ -1,13 +1,14 @@
 import type { ComponentPropsWithRef } from 'react';
 type ThinkingStateVariant = 'drive' | 'dots' | 'orbit';
 declare const SIZES: {
+    xs: "size-3";
     sm: "size-4";
     md: "size-5";
     lg: "size-6";
 };
 interface LoadingIndicatorProps extends Omit<ComponentPropsWithRef<'span'>, 'children'> {
     variant?: ThinkingStateVariant;
-    /** Indicator outer size: sm=16px, md=20px, lg=24px. */
+    /** Indicator outer size: xs=12px, sm=16px, md=20px, lg=24px. */
     size?: keyof typeof SIZES;
     tone?: 'neutral' | 'brand';
     /** Reduced-motion preferences always take precedence. */

package/dist/components/ThinkingState/LoadingIndicator.js

@@ -1,2 +1,2 @@
-import { t as LoadingIndicator } from "../../_chunks/LoadingIndicator-CDcArsiM.js";
+import { t as LoadingIndicator } from "../../_chunks/LoadingIndicator-DujSAzqj.js";
 export { LoadingIndicator };

package/dist/components/ThinkingState/ThinkingState.js

@@ -1,6 +1,6 @@
 import { cn } from "../../utils/cn.js";
 import { Text } from "../Text/Text.js";
-import { n as ThinkingState_module_default, t as LoadingIndicator } from "../../_chunks/LoadingIndicator-CDcArsiM.js";
+import { n as ThinkingState_module_default, t as LoadingIndicator } from "../../_chunks/LoadingIndicator-DujSAzqj.js";
 import { ThinkingStateTimer } from "./ThinkingStateTimer.js";
 import { forwardRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -21,12 +21,12 @@ var ThinkingState = forwardRef(function ThinkingState({ label = "Thinking", vari
 			className: "inline-flex min-w-0 items-baseline gap-space-2",
 			children: [/* @__PURE__ */ jsx(Text, {
 				as: "span",
-				variant: size === "sm" ? "sm" : "md",
-				weight: "medium",
+				variant: size === "xs" ? "xs" : size === "sm" ? "sm" : "md",
+				weight: size === "xs" ? "normal" : "medium",
 				role: "status",
 				"aria-live": "polite",
 				"aria-atomic": "true",
-				className: cn("min-w-0 break-words leading-4", motion === "full" ? ThinkingState_module_default.shimmer : "text-secondary", motion === "full" && tone === "brand" && ThinkingState_module_default.brandShimmer, speed === "slow" && ThinkingState_module_default.slow),
+				className: cn("min-w-0 break-words", size === "xs" ? "leading-snug tracking-normal" : "leading-4", motion === "full" ? ThinkingState_module_default.shimmer : "text-secondary", motion === "full" && tone === "brand" && ThinkingState_module_default.brandShimmer, speed === "slow" && ThinkingState_module_default.slow),
 				children: label
 			}), /* @__PURE__ */ jsx(ThinkingStateTimer, {
 				visible: showElapsed,

package/dist/components/ThinkingState/ThinkingState.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThinkingState.js","names":[],"sources":["../../../src/components/ThinkingState/ThinkingState.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport type { ComponentPropsWithRef, ReactNode } from 'react';\n\nimport { cn } from '../../utils/cn';\nimport { Text } from '../Text';\nimport {\n  LoadingIndicator,\n  type LoadingIndicatorProps,\n} from './LoadingIndicator';\nimport { ThinkingStateTimer } from './ThinkingStateTimer';\n\nimport styles from './ThinkingState.module.css';\n\ninterface ThinkingStateProps extends Omit<\n  ComponentPropsWithRef<'div'>,\n  'children'\n> {\n  /** Short, noninteractive description of the work in progress. */\n  label?: ReactNode;\n  variant?: LoadingIndicatorProps['variant'];\n  size?: LoadingIndicatorProps['size'];\n  tone?: LoadingIndicatorProps['tone'];\n  /** Full animates the grid and label; subtle animates only the grid; none is static. */\n  motion?: 'full' | 'subtle' | 'none';\n  speed?: LoadingIndicatorProps['speed'];\n  /** Opt in to elapsed time for longer waits. Hidden by default. */\n  showElapsed?: boolean;\n  /** Supply elapsed milliseconds from the operation to disable the internal clock. */\n  elapsedMs?: number;\n  /** Seconds updates once per second; tenths preserves the finer-grained source timer. */\n  timerPrecision?: 'seconds' | 'tenths';\n}\n\n/** Inline status for active AI work. Remount with a new key for a new operation. */\nconst ThinkingState = forwardRef<HTMLDivElement, ThinkingStateProps>(\n  function ThinkingState(\n    {\n      label = 'Thinking',\n      variant = 'drive',\n      size = 'sm',\n      tone = 'neutral',\n      motion = 'full',\n      speed = 'normal',\n      showElapsed = false,\n      elapsedMs,\n      timerPrecision = 'seconds',\n      className,\n      ...props\n    },\n    ref\n  ) {\n    return (\n      <div\n        {...props}\n        ref={ref}\n        className={cn(\n          'inline-flex max-w-full items-center gap-space-2 align-middle',\n          className\n        )}\n      >\n        <LoadingIndicator\n          variant={variant}\n          size={size}\n          tone={tone}\n          animated={motion !== 'none'}\n          speed={speed}\n        />\n        <span className=\"inline-flex min-w-0 items-baseline gap-space-2\">\n          <Text\n            as=\"span\"\n            variant={size === 'sm' ? 'sm' : 'md'}\n            weight=\"medium\"\n            role=\"status\"\n            aria-live=\"polite\"\n            aria-atomic=\"true\"\n            className={cn(\n              'min-w-0 break-words leading-4',\n              motion === 'full' ? styles.shimmer : 'text-secondary',\n              motion === 'full' && tone === 'brand' && styles.brandShimmer,\n              speed === 'slow' && styles.slow\n            )}\n          >\n            {label}\n          </Text>\n          <ThinkingStateTimer\n            visible={showElapsed}\n            elapsedMs={elapsedMs}\n            precision={timerPrecision}\n            size={size}\n          />\n        </span>\n      </div>\n    );\n  }\n);\n\nexport { ThinkingState };\nexport type { ThinkingStateProps };\n"],"mappings":";;;;;;;;AAkCA,IAAM,gBAAgB,WACpB,SAAS,cACP,EACE,QAAQ,YACR,UAAU,SACV,OAAO,MACP,OAAO,WACP,SAAS,QACT,QAAQ,UACR,cAAc,OACd,WACA,iBAAiB,WACjB,WACA,GAAG,SAEL,KACA;CACA,OACE,qBAAC,OAAD;EACE,GAAI;EACC;EACL,WAAW,GACT,gEACA,SACF;EANF,UAAA,CAQE,oBAAC,kBAAD;GACW;GACH;GACA;GACN,UAAU,WAAW;GACd;EACR,CAAA,GACD,qBAAC,QAAD;GAAM,WAAU;GAAhB,UAAA,CACE,oBAAC,MAAD;IACE,IAAG;IACH,SAAS,SAAS,OAAO,OAAO;IAChC,QAAO;IACP,MAAK;IACL,aAAU;IACV,eAAY;IACZ,WAAW,GACT,iCACA,WAAW,SAAS,6BAAO,UAAU,kBACrC,WAAW,UAAU,SAAS,WAAW,6BAAO,cAChD,UAAU,UAAU,6BAAO,IAC7B;IAEC,UAAA;GACG,CAAA,GACN,oBAAC,oBAAD;IACE,SAAS;IACE;IACX,WAAW;IACL;GACP,CAAA,CACG;EACH,CAAA,CAAA;;AAET,CACF"}
+{"version":3,"file":"ThinkingState.js","names":[],"sources":["../../../src/components/ThinkingState/ThinkingState.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport type { ComponentPropsWithRef, ReactNode } from 'react';\n\nimport { cn } from '../../utils/cn';\nimport { Text } from '../Text';\nimport {\n  LoadingIndicator,\n  type LoadingIndicatorProps,\n} from './LoadingIndicator';\nimport { ThinkingStateTimer } from './ThinkingStateTimer';\n\nimport styles from './ThinkingState.module.css';\n\ninterface ThinkingStateProps extends Omit<\n  ComponentPropsWithRef<'div'>,\n  'children'\n> {\n  /** Short, noninteractive description of the work in progress. */\n  label?: ReactNode;\n  variant?: LoadingIndicatorProps['variant'];\n  size?: LoadingIndicatorProps['size'];\n  tone?: LoadingIndicatorProps['tone'];\n  /** Full animates the grid and label; subtle animates only the grid; none is static. */\n  motion?: 'full' | 'subtle' | 'none';\n  speed?: LoadingIndicatorProps['speed'];\n  /** Opt in to elapsed time for longer waits. Hidden by default. */\n  showElapsed?: boolean;\n  /** Supply elapsed milliseconds from the operation to disable the internal clock. */\n  elapsedMs?: number;\n  /** Seconds updates once per second; tenths preserves the finer-grained source timer. */\n  timerPrecision?: 'seconds' | 'tenths';\n}\n\n/** Inline status for active AI work. Remount with a new key for a new operation. */\nconst ThinkingState = forwardRef<HTMLDivElement, ThinkingStateProps>(\n  function ThinkingState(\n    {\n      label = 'Thinking',\n      variant = 'drive',\n      size = 'sm',\n      tone = 'neutral',\n      motion = 'full',\n      speed = 'normal',\n      showElapsed = false,\n      elapsedMs,\n      timerPrecision = 'seconds',\n      className,\n      ...props\n    },\n    ref\n  ) {\n    return (\n      <div\n        {...props}\n        ref={ref}\n        className={cn(\n          'inline-flex max-w-full items-center gap-space-2 align-middle',\n          className\n        )}\n      >\n        <LoadingIndicator\n          variant={variant}\n          size={size}\n          tone={tone}\n          animated={motion !== 'none'}\n          speed={speed}\n        />\n        <span className=\"inline-flex min-w-0 items-baseline gap-space-2\">\n          <Text\n            as=\"span\"\n            variant={size === 'xs' ? 'xs' : size === 'sm' ? 'sm' : 'md'}\n            weight={size === 'xs' ? 'normal' : 'medium'}\n            role=\"status\"\n            aria-live=\"polite\"\n            aria-atomic=\"true\"\n            className={cn(\n              'min-w-0 break-words',\n              size === 'xs' ? 'leading-snug tracking-normal' : 'leading-4',\n              motion === 'full' ? styles.shimmer : 'text-secondary',\n              motion === 'full' && tone === 'brand' && styles.brandShimmer,\n              speed === 'slow' && styles.slow\n            )}\n          >\n            {label}\n          </Text>\n          <ThinkingStateTimer\n            visible={showElapsed}\n            elapsedMs={elapsedMs}\n            precision={timerPrecision}\n            size={size}\n          />\n        </span>\n      </div>\n    );\n  }\n);\n\nexport { ThinkingState };\nexport type { ThinkingStateProps };\n"],"mappings":";;;;;;;;AAkCA,IAAM,gBAAgB,WACpB,SAAS,cACP,EACE,QAAQ,YACR,UAAU,SACV,OAAO,MACP,OAAO,WACP,SAAS,QACT,QAAQ,UACR,cAAc,OACd,WACA,iBAAiB,WACjB,WACA,GAAG,SAEL,KACA;CACA,OACE,qBAAC,OAAD;EACE,GAAI;EACC;EACL,WAAW,GACT,gEACA,SACF;EANF,UAAA,CAQE,oBAAC,kBAAD;GACW;GACH;GACA;GACN,UAAU,WAAW;GACd;EACR,CAAA,GACD,qBAAC,QAAD;GAAM,WAAU;GAAhB,UAAA,CACE,oBAAC,MAAD;IACE,IAAG;IACH,SAAS,SAAS,OAAO,OAAO,SAAS,OAAO,OAAO;IACvD,QAAQ,SAAS,OAAO,WAAW;IACnC,MAAK;IACL,aAAU;IACV,eAAY;IACZ,WAAW,GACT,uBACA,SAAS,OAAO,iCAAiC,aACjD,WAAW,SAAS,6BAAO,UAAU,kBACrC,WAAW,UAAU,SAAS,WAAW,6BAAO,cAChD,UAAU,UAAU,6BAAO,IAC7B;IAEC,UAAA;GACG,CAAA,GACN,oBAAC,oBAAD;IACE,SAAS;IACE;IACX,WAAW;IACL;GACP,CAAA,CACG;EACH,CAAA,CAAA;;AAET,CACF"}

package/dist/components/ThinkingState/ThinkingStateTimer.d.ts

@@ -2,7 +2,7 @@ interface ThinkingStateTimerProps {
     visible: boolean;
     elapsedMs?: number;
     precision: 'seconds' | 'tenths';
-    size: 'sm' | 'md' | 'lg';
+    size: 'xs' | 'sm' | 'md' | 'lg';
 }
 /** Keeps clock updates local to the timer, without rerendering the label or grid. */
 export declare function ThinkingStateTimer({ visible, elapsedMs, precision, size, }: ThinkingStateTimerProps): import("react").JSX.Element | null;

package/dist/components/ThinkingState/ThinkingStateTimer.js

@@ -28,7 +28,7 @@ function ThinkingStateTimer({ visible, elapsedMs, precision, size }) {
 	const seconds = precision === "tenths" ? (tenths % 600 / 10).toFixed(1) : String(Math.floor(tenths % 600 / 10));
 	return /* @__PURE__ */ jsx(Text, {
 		as: "span",
-		variant: size === "sm" ? "xs" : "sm",
+		variant: size === "xs" || size === "sm" ? "xs" : "sm",
 		color: "tertiary",
 		role: "timer",
 		"aria-label": "Elapsed time",

package/dist/components/ThinkingState/ThinkingStateTimer.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThinkingStateTimer.js","names":[],"sources":["../../../src/components/ThinkingState/ThinkingStateTimer.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport { Text } from '../Text';\n\ninterface ThinkingStateTimerProps {\n  visible: boolean;\n  elapsedMs?: number;\n  precision: 'seconds' | 'tenths';\n  size: 'sm' | 'md' | 'lg';\n}\n\n/** Keeps clock updates local to the timer, without rerendering the label or grid. */\nexport function ThinkingStateTimer({\n  visible,\n  elapsedMs,\n  precision,\n  size,\n}: ThinkingStateTimerProps) {\n  const startedAt = useRef<number | null>(null);\n  const [measuredMs, setMeasuredMs] = useState(0);\n  const controlled = elapsedMs !== undefined;\n  const intervalMs = precision === 'tenths' ? 100 : 1_000;\n\n  useEffect(() => {\n    startedAt.current ??= performance.now();\n    const start = startedAt.current;\n    if (!visible || controlled) return;\n\n    // Measure time so hidden tabs and delayed callbacks do not lose elapsed time.\n    const tick = () => setMeasuredMs(performance.now() - start);\n    tick();\n    const interval = window.setInterval(tick, intervalMs);\n    return () => window.clearInterval(interval);\n  }, [controlled, intervalMs, visible]);\n\n  if (!visible) return null;\n\n  const value = elapsedMs ?? measuredMs;\n  const safeMs = Number.isFinite(value) ? Math.max(0, value) : 0;\n  const tenths = Math.floor(safeMs / 100);\n  const minutes = Math.floor(tenths / 600);\n  const seconds =\n    precision === 'tenths'\n      ? ((tenths % 600) / 10).toFixed(1)\n      : String(Math.floor((tenths % 600) / 10));\n\n  return (\n    <Text\n      as=\"span\"\n      variant={size === 'sm' ? 'xs' : 'sm'}\n      color=\"tertiary\"\n      role=\"timer\"\n      aria-label=\"Elapsed time\"\n      aria-live=\"off\"\n      className=\"shrink-0 whitespace-nowrap font-mono tabular-nums leading-4\"\n    >\n      {minutes > 0 ? `${minutes}m ${seconds}s` : `${seconds}s`}\n    </Text>\n  );\n}\n"],"mappings":";;;;;AAYA,SAAgB,mBAAmB,EACjC,SACA,WACA,WACA,QAC0B;CAC1B,MAAM,YAAY,OAAsB,IAAI;CAC5C,MAAM,CAAC,YAAY,iBAAiB,SAAS,CAAC;CAC9C,MAAM,aAAa,cAAc,KAAA;CACjC,MAAM,aAAa,cAAc,WAAW,MAAM;CAElD,gBAAgB;EACd,UAAU,YAAY,YAAY,IAAI;EACtC,MAAM,QAAQ,UAAU;EACxB,IAAI,CAAC,WAAW,YAAY;EAG5B,MAAM,aAAa,cAAc,YAAY,IAAI,IAAI,KAAK;EAC1D,KAAK;EACL,MAAM,WAAW,OAAO,YAAY,MAAM,UAAU;EACpD,aAAa,OAAO,cAAc,QAAQ;CAC5C,GAAG;EAAC;EAAY;EAAY;CAAO,CAAC;CAEpC,IAAI,CAAC,SAAS,OAAO;CAErB,MAAM,QAAQ,aAAa;CAE3B,MAAM,SAAS,KAAK,OADL,OAAO,SAAS,KAAK,IAAI,KAAK,IAAI,GAAG,KAAK,IAAI,KAC1B,GAAG;CACtC,MAAM,UAAU,KAAK,MAAM,SAAS,GAAG;CACvC,MAAM,UACJ,cAAc,YACR,SAAS,MAAO,GAAA,CAAI,QAAQ,CAAC,IAC/B,OAAO,KAAK,MAAO,SAAS,MAAO,EAAE,CAAC;CAE5C,OACE,oBAAC,MAAD;EACE,IAAG;EACH,SAAS,SAAS,OAAO,OAAO;EAChC,OAAM;EACN,MAAK;EACL,cAAW;EACX,aAAU;EACV,WAAU;EAET,UAAA,UAAU,IAAI,GAAG,QAAQ,IAAI,QAAQ,KAAK,GAAG,QAAQ;CAClD,CAAA;AAEV"}
+{"version":3,"file":"ThinkingStateTimer.js","names":[],"sources":["../../../src/components/ThinkingState/ThinkingStateTimer.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport { Text } from '../Text';\n\ninterface ThinkingStateTimerProps {\n  visible: boolean;\n  elapsedMs?: number;\n  precision: 'seconds' | 'tenths';\n  size: 'xs' | 'sm' | 'md' | 'lg';\n}\n\n/** Keeps clock updates local to the timer, without rerendering the label or grid. */\nexport function ThinkingStateTimer({\n  visible,\n  elapsedMs,\n  precision,\n  size,\n}: ThinkingStateTimerProps) {\n  const startedAt = useRef<number | null>(null);\n  const [measuredMs, setMeasuredMs] = useState(0);\n  const controlled = elapsedMs !== undefined;\n  const intervalMs = precision === 'tenths' ? 100 : 1_000;\n\n  useEffect(() => {\n    startedAt.current ??= performance.now();\n    const start = startedAt.current;\n    if (!visible || controlled) return;\n\n    // Measure time so hidden tabs and delayed callbacks do not lose elapsed time.\n    const tick = () => setMeasuredMs(performance.now() - start);\n    tick();\n    const interval = window.setInterval(tick, intervalMs);\n    return () => window.clearInterval(interval);\n  }, [controlled, intervalMs, visible]);\n\n  if (!visible) return null;\n\n  const value = elapsedMs ?? measuredMs;\n  const safeMs = Number.isFinite(value) ? Math.max(0, value) : 0;\n  const tenths = Math.floor(safeMs / 100);\n  const minutes = Math.floor(tenths / 600);\n  const seconds =\n    precision === 'tenths'\n      ? ((tenths % 600) / 10).toFixed(1)\n      : String(Math.floor((tenths % 600) / 10));\n\n  return (\n    <Text\n      as=\"span\"\n      variant={size === 'xs' || size === 'sm' ? 'xs' : 'sm'}\n      color=\"tertiary\"\n      role=\"timer\"\n      aria-label=\"Elapsed time\"\n      aria-live=\"off\"\n      className=\"shrink-0 whitespace-nowrap font-mono tabular-nums leading-4\"\n    >\n      {minutes > 0 ? `${minutes}m ${seconds}s` : `${seconds}s`}\n    </Text>\n  );\n}\n"],"mappings":";;;;;AAYA,SAAgB,mBAAmB,EACjC,SACA,WACA,WACA,QAC0B;CAC1B,MAAM,YAAY,OAAsB,IAAI;CAC5C,MAAM,CAAC,YAAY,iBAAiB,SAAS,CAAC;CAC9C,MAAM,aAAa,cAAc,KAAA;CACjC,MAAM,aAAa,cAAc,WAAW,MAAM;CAElD,gBAAgB;EACd,UAAU,YAAY,YAAY,IAAI;EACtC,MAAM,QAAQ,UAAU;EACxB,IAAI,CAAC,WAAW,YAAY;EAG5B,MAAM,aAAa,cAAc,YAAY,IAAI,IAAI,KAAK;EAC1D,KAAK;EACL,MAAM,WAAW,OAAO,YAAY,MAAM,UAAU;EACpD,aAAa,OAAO,cAAc,QAAQ;CAC5C,GAAG;EAAC;EAAY;EAAY;CAAO,CAAC;CAEpC,IAAI,CAAC,SAAS,OAAO;CAErB,MAAM,QAAQ,aAAa;CAE3B,MAAM,SAAS,KAAK,OADL,OAAO,SAAS,KAAK,IAAI,KAAK,IAAI,GAAG,KAAK,IAAI,KAC1B,GAAG;CACtC,MAAM,UAAU,KAAK,MAAM,SAAS,GAAG;CACvC,MAAM,UACJ,cAAc,YACR,SAAS,MAAO,GAAA,CAAI,QAAQ,CAAC,IAC/B,OAAO,KAAK,MAAO,SAAS,MAAO,EAAE,CAAC;CAE5C,OACE,oBAAC,MAAD;EACE,IAAG;EACH,SAAS,SAAS,QAAQ,SAAS,OAAO,OAAO;EACjD,OAAM;EACN,MAAK;EACL,cAAW;EACX,aAAU;EACV,WAAU;EAET,UAAA,UAAU,IAAI,GAAG,QAAQ,IAAI,QAAQ,KAAK,GAAG,QAAQ;CAClD,CAAA;AAEV"}

package/dist/components/ThinkingState/index.js

@@ -1,3 +1,3 @@
-import { t as LoadingIndicator } from "../../_chunks/LoadingIndicator-CDcArsiM.js";
+import { t as LoadingIndicator } from "../../_chunks/LoadingIndicator-DujSAzqj.js";
 import { ThinkingState } from "./ThinkingState.js";
 export { LoadingIndicator, ThinkingState };

package/dist/components/index.d.ts

@@ -10,6 +10,8 @@ export { EmptyState } from './EmptyState/index.js';
 export type { EmptyStateProps, EmptyStateSize, EmptyStateVariant, } from './EmptyState/index.js';
 export { Avatar } from './Avatar/index.js';
 export type { AvatarProps } from './Avatar/index.js';
+export { HeatmapChart, HeatmapBlock } from './HeatmapChart/index.js';
+export type { HeatmapChartProps, HeatmapBlockProps, HeatmapBlockSize, HeatmapBlockColor, } from './HeatmapChart/index.js';
 export { Attachment, AttachmentList } from './Attachment/index.js';
 export type { AttachmentProps, AttachmentListProps } from './Attachment/index.js';
 export { ErrorState } from './ErrorState/index.js';

package/dist/components/index.js

@@ -21,6 +21,8 @@ import { getCheckedState } from "./Checkbox/getCheckedState.js";
 import { Divider } from "./Divider/Divider.js";
 import { t as ErrorState } from "../_chunks/ErrorState-CmPX01HV.js";
 import { GroupedTabs } from "./GroupedTabs/GroupedTabs.js";
+import { HeatmapBlock } from "./HeatmapChart/HeatmapBlock.js";
+import { HeatmapChart } from "./HeatmapChart/HeatmapChart.js";
 import { Input } from "./Input/Input.js";
 import { Kbd, KbdGroup } from "./Kbd/Kbd.js";
 import { LinearProgress } from "./LinearProgress/LinearProgress.js";
@@ -34,4 +36,4 @@ import { RadioGroupItem } from "./RadioGroup/RadioGroupItem.js";
 import { Slider } from "./Slider/Slider.js";
 import { Switch } from "./Switch/Switch.js";
 import { Textarea } from "./Textarea/Textarea.js";
-export { Attachment, AttachmentList, Avatar, Badge, Banner, Button, ButtonGroup, Card, ChartTooltip, ChartTooltipBody, ChartTooltipHeader, ChartTooltipRow, Checkbox, CircleSkeleton, Divider, EmptyState, ErrorState, GroupedTabs, Icon, IconButton, Input, Kbd, KbdGroup, LinearProgress, Link, MetricChart, ProgressBar, RadioButton, RadioCard, RadioGroup, RadioGroupItem, Skeleton, SkeletonRows, Slider, Spinner, SpinnerIcon, Switch, Text, Textarea, Tooltip, TooltipProvider, formatMetricCurrency, formatMetricDate, formatMetricDuration, formatMetricNumber, formatMetricTime, getCheckedState };
+export { Attachment, AttachmentList, Avatar, Badge, Banner, Button, ButtonGroup, Card, ChartTooltip, ChartTooltipBody, ChartTooltipHeader, ChartTooltipRow, Checkbox, CircleSkeleton, Divider, EmptyState, ErrorState, GroupedTabs, HeatmapBlock, HeatmapChart, Icon, IconButton, Input, Kbd, KbdGroup, LinearProgress, Link, MetricChart, ProgressBar, RadioButton, RadioCard, RadioGroup, RadioGroupItem, Skeleton, SkeletonRows, Slider, Spinner, SpinnerIcon, Switch, Text, Textarea, Tooltip, TooltipProvider, formatMetricCurrency, formatMetricDate, formatMetricDuration, formatMetricNumber, formatMetricTime, getCheckedState };

package/dist/index.js

@@ -21,6 +21,8 @@ import { getCheckedState } from "./components/Checkbox/getCheckedState.js";
 import { Divider } from "./components/Divider/Divider.js";
 import { t as ErrorState } from "./_chunks/ErrorState-CmPX01HV.js";
 import { GroupedTabs } from "./components/GroupedTabs/GroupedTabs.js";
+import { HeatmapBlock } from "./components/HeatmapChart/HeatmapBlock.js";
+import { HeatmapChart } from "./components/HeatmapChart/HeatmapChart.js";
 import { Input } from "./components/Input/Input.js";
 import { Kbd, KbdGroup } from "./components/Kbd/Kbd.js";
 import { LinearProgress } from "./components/LinearProgress/LinearProgress.js";
@@ -35,4 +37,4 @@ import { Slider } from "./components/Slider/Slider.js";
 import { Switch } from "./components/Switch/Switch.js";
 import { Textarea } from "./components/Textarea/Textarea.js";
 import "./components/index.js";
-export { Attachment, AttachmentList, Avatar, Badge, Banner, Button, ButtonGroup, Card, ChartTooltip, ChartTooltipBody, ChartTooltipHeader, ChartTooltipRow, Checkbox, CircleSkeleton, Divider, EmptyState, ErrorState, GroupedTabs, Icon, IconButton, Input, Kbd, KbdGroup, LinearProgress, Link, MetricChart, ProgressBar, RadioButton, RadioCard, RadioGroup, RadioGroupItem, Skeleton, SkeletonRows, Slider, Spinner, SpinnerIcon, Switch, Text, Textarea, Tooltip, TooltipProvider, formatMetricCurrency, formatMetricDate, formatMetricDuration, formatMetricNumber, formatMetricTime, getCheckedState };
+export { Attachment, AttachmentList, Avatar, Badge, Banner, Button, ButtonGroup, Card, ChartTooltip, ChartTooltipBody, ChartTooltipHeader, ChartTooltipRow, Checkbox, CircleSkeleton, Divider, EmptyState, ErrorState, GroupedTabs, HeatmapBlock, HeatmapChart, Icon, IconButton, Input, Kbd, KbdGroup, LinearProgress, Link, MetricChart, ProgressBar, RadioButton, RadioCard, RadioGroup, RadioGroupItem, Skeleton, SkeletonRows, Slider, Spinner, SpinnerIcon, Switch, Text, Textarea, Tooltip, TooltipProvider, formatMetricCurrency, formatMetricDate, formatMetricDuration, formatMetricNumber, formatMetricTime, getCheckedState };