51:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 52:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 53:T3581,"use client"; import { mergeProps } from "@base-ui/react/merge-props"; import { useRender } from "@base-ui/react/use-render"; import * as stylex from "@stylexjs/stylex"; import { createContext, use } from "react"; import type { ComponentProps, ReactNode } from "react"; import { Shimmer } from "@/components/ai/shimmer"; import { Button } from "@/components/primitives/button"; import type { ButtonProps } from "@/components/primitives/button"; import { scrollFade } from "@/lib/constella/scroll-fade"; import type { Sx } from "@/lib/constella/styles"; import { typeStyles } from "@/lib/constella/styles"; import { colors, durations, fontWeights, lineHeights, media, opacities, radii, sizes, space, strokes, } from "@/lib/constella/tokens.stylex"; const attachmentStates = [ "idle", "uploading", "processing", "error", "done", ] as const; const attachmentSizes = ["xs", "sm", "default"] as const; const attachmentOrientations = ["horizontal", "vertical"] as const; const attachmentMediaVariants = ["default", "image"] as const; type AttachmentState = (typeof attachmentStates)[number]; type AttachmentSize = (typeof attachmentSizes)[number]; type AttachmentOrientation = (typeof attachmentOrientations)[number]; type AttachmentMediaVariant = (typeof attachmentMediaVariants)[number]; type Styled = Omit & { sx?: Sx; }; const State = createContext("done"); const root = "[data-slot='attachment']"; const inSize = (size: AttachmentSize) => `:is(${root}[data-size='${size}'] *)`; const inState = (state: AttachmentState) => `:is(${root}[data-state='${state}'] *)`; const vertical = `:is(${root}[data-orientation='vertical'] *)`; const withMedia = ":has(> [data-slot='attachment-media'])"; const withContent = ":has(> [data-slot='attachment-content'])"; const pressable = ":has(> [data-slot='attachment-trigger'])"; // The media's corner plus the inset around it, so the two stay concentric. const corner = { default: `calc(${radii.sm} + ${space.xs})`, ":is([data-size='sm'])": `calc(${radii.sm} + ${space.row})`, ":is([data-size='xs'])": `calc(${radii.xs} + ${space.xxs})`, }; // A card with media is inset evenly around it; one with only text, wider at the sides. const textOnly = `:not(${withMedia})${withContent}`; const padBlock = { default: 0, [textOnly]: space.xs, [`:is([data-size='sm'])${textOnly}`]: space.row, [`:is([data-size='xs'])${textOnly}`]: space.xxs, [withMedia]: space.xs, [`:is([data-size='sm'])${withMedia}`]: space.row, [`:is([data-size='xs'])${withMedia}`]: space.xxs, }; const padInline = { default: 0, [textOnly]: space.popup, [`:is([data-size='sm'])${textOnly}`]: space.xs, [`:is([data-size='xs'])${textOnly}`]: space.row, [withMedia]: space.xs, [`:is([data-size='sm'])${withMedia}`]: space.row, [`:is([data-size='xs'])${withMedia}`]: space.xxs, }; const styles = stylex.create({ attachment: { alignItems: { default: "center", ":is([data-orientation='vertical'])": null, }, backgroundColor: { default: colors.raised, [media.hover]: { default: colors.raised, [`${pressable}:hover`]: colors.fillSubtle, }, }, borderBlockEndColor: { default: colors.border, ":is([data-state='error'])": colors.dangerBorder, }, borderBlockStartColor: { default: colors.border, ":is([data-state='error'])": colors.dangerBorder, }, borderInlineEndColor: { default: colors.border, ":is([data-state='error'])": colors.dangerBorder, }, borderInlineStartColor: { default: colors.border, ":is([data-state='error'])": colors.dangerBorder, }, borderBlockEndStyle: { default: "solid", ":is([data-state='idle'])": "dashed", }, borderBlockStartStyle: { default: "solid", ":is([data-state='idle'])": "dashed", }, borderInlineEndStyle: { default: "solid", ":is([data-state='idle'])": "dashed", }, borderInlineStartStyle: { default: "solid", ":is([data-state='idle'])": "dashed", }, borderBlockEndWidth: strokes.border, borderBlockStartWidth: strokes.border, borderInlineEndWidth: strokes.border, borderInlineStartWidth: strokes.border, borderStartStartRadius: corner, borderStartEndRadius: corner, borderEndStartRadius: corner, borderEndEndRadius: corner, color: colors.textPrimary, display: "flex", flexDirection: { default: "row", ":is([data-orientation='vertical'])": "column", }, flexShrink: 0, flexWrap: "wrap", gap: { default: space.xs, ":is([data-orientation='horizontal'][data-size='default'])": space.sm, ":is([data-size='sm'])": space.popup, ":is([data-size='xs'])": space.row, }, maxWidth: "100%", minWidth: { default: 0, ":is([data-orientation='horizontal'])": sizes.itemText, }, paddingBlockEnd: padBlock, paddingBlockStart: padBlock, // The text's end inset matches its gap from the media. paddingInlineEnd: { ...padInline, [`:is([data-orientation='horizontal'][data-size='default'])${withMedia}`]: space.sm, [`:is([data-orientation='horizontal'][data-size='sm'])${withMedia}`]: space.popup, [`:is([data-orientation='horizontal'][data-size='xs'])${withMedia}`]: space.row, }, paddingInlineStart: padInline, position: "relative", scrollSnapAlign: "start", transitionDuration: durations.hover, transitionProperty: "background-color, border-color", transitionTimingFunction: "ease", width: { default: "fit-content", ":is([data-orientation='vertical'])": sizes.attachment, [`:is([data-orientation='vertical'])${withContent}`]: sizes.attachmentWide, }, }, media: { alignItems: "center", aspectRatio: "1", backgroundColor: { default: colors.fill, [inState("error")]: colors.dangerSubtle, }, borderStartStartRadius: { default: radii.sm, [inSize("xs")]: radii.xs }, borderStartEndRadius: { default: radii.sm, [inSize("xs")]: radii.xs }, borderEndStartRadius: { default: radii.sm, [inSize("xs")]: radii.xs }, borderEndEndRadius: { default: radii.sm, [inSize("xs")]: radii.xs }, color: { default: colors.textPrimary, [inState("error")]: colors.dangerText, }, display: "flex", flexShrink: 0, justifyContent: "center", overflow: "hidden", position: "relative", width: { default: sizes.media, [inSize("sm")]: sizes.controlMd, [inSize("xs")]: sizes.controlSm, [vertical]: "100%", }, }, // An image waits dimmed until its file is in. image: { opacity: { default: opacities.busy, [inState("done")]: 1, [inState("idle")]: 1, }, }, // Two lines exactly the media's height, so the media's inset holds on every side; xs has room for one. content: { alignItems: { default: null, [inSize("xs")]: "baseline" }, columnGap: { default: null, [inSize("xs")]: space.xs }, display: { default: null, [inSize("xs")]: "flex" }, flex: "1", lineHeight: { default: lineHeights.textSm, [inSize("sm")]: lineHeights.captionLg, }, maxWidth: "100%", minWidth: 0, paddingInlineEnd: { default: null, [vertical]: space.xxs }, paddingInlineStart: { default: null, [vertical]: space.xxs }, }, title: { color: { default: null, [inState("uploading")]: colors.textSecondary, [inState("processing")]: colors.textSecondary, }, display: "block", fontWeight: fontWeights.medium, maxWidth: "100%", minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", }, description: { color: { default: colors.textSecondary, [inState("error")]: colors.dangerText, }, display: "block", flexShrink: 0, lineHeight: { default: null, [inSize("sm")]: lineHeights.captionLg }, marginBlockStart: { default: 0, [vertical]: space.xxxs }, maxWidth: "100%", minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", }, // Over the trigger, so each action stays its own target. Over a picture it sits on its own // `raised` chip, so a ghost action's hover fill never shows the image through. actions: { alignItems: "center", backgroundColor: { default: null, [vertical]: colors.raised }, borderStartStartRadius: { default: null, [vertical]: radii.sm }, borderStartEndRadius: { default: null, [vertical]: radii.sm }, borderEndStartRadius: { default: null, [vertical]: radii.sm }, borderEndEndRadius: { default: null, [vertical]: radii.sm }, display: "flex", flexShrink: 0, gap: { default: null, [vertical]: space.xxs }, insetBlockStart: { default: null, [vertical]: space.sm }, insetInlineEnd: { default: null, [vertical]: space.sm }, position: { default: "relative", [vertical]: "absolute" }, zIndex: 2, }, // Covers the whole card, so the card opens from anywhere on it; its ring follows the corner. trigger: { backgroundColor: "transparent", borderBlockEndWidth: 0, borderBlockStartWidth: 0, borderInlineEndWidth: 0, borderInlineStartWidth: 0, borderStartStartRadius: "inherit", borderStartEndRadius: "inherit", borderEndStartRadius: "inherit", borderEndEndRadius: "inherit", cursor: "pointer", insetBlockEnd: 0, insetBlockStart: 0, insetInlineEnd: 0, insetInlineStart: 0, paddingBlockEnd: 0, paddingBlockStart: 0, paddingInlineEnd: 0, paddingInlineStart: 0, position: "absolute", zIndex: 1, }, group: { display: "flex", gap: space.xs, minWidth: 0, overflowX: "auto", overscrollBehaviorX: "contain", paddingBlockEnd: space.xxs, paddingBlockStart: space.xxs, scrollPaddingInline: space.xxs, scrollSnapType: "x mandatory", scrollbarWidth: "none", }, }); const mediaStyles = { default: null, image: styles.image, } satisfies Record; type AttachmentProps = Styled> & { orientation?: AttachmentOrientation; size?: AttachmentSize; state?: AttachmentState; }; /** A file or image: its media, name and details, upload state and actions. */ function Attachment({ orientation = "horizontal", size = "default", state = "done", sx, ...props }: AttachmentProps) { return (

); } function AttachmentMedia({ sx, variant = "default", ...props }: Styled> & { variant?: AttachmentMediaVariant }) { return (

); } function AttachmentContent({ sx, ...props }: Styled>) { return (

); } /** The file's name; it shimmers while the file uploads or processes. */ function AttachmentTitle({ children, sx, ...props }: Styled> & { children?: ReactNode }) { const state = use(State); const working = state === "uploading" || state === "processing"; return ( {working ? {children} : children} ); } function AttachmentDescription({ sx, ...props }: Styled>) { return ( ); } function AttachmentActions({ sx, ...props }: Styled>) { return (

); } function AttachmentAction({ size = "icon-xs", variant = "ghost", ...props }: ButtonProps) { return (