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:T305a,import { mergeProps } from "@base-ui/react/merge-props"; import { useRender } from "@base-ui/react/use-render"; import * as stylex from "@stylexjs/stylex"; import type { ComponentProps, ReactNode } from "react"; import { scrollFade } from "@/lib/constella/scroll-fade"; import { scrollFadeVars } from "@/lib/constella/scroll-fade.stylex"; import type { Sx } from "@/lib/constella/styles"; import { typeStyles } from "@/lib/constella/styles"; import { codeBlockVars, colors, fonts, fontWeights, lineHeights, radii, sizes, space, } from "@/lib/constella/tokens.stylex"; const codeBlockColors = ["danger"] as const; const codeBlockSizes = ["sm", "default"] as const; const codeBlockLineVariants = [ "default", "added", "removed", "highlighted", ] as const; type CodeBlockColor = (typeof codeBlockColors)[number]; type CodeBlockSize = (typeof codeBlockSizes)[number]; type CodeBlockLineVariant = (typeof codeBlockLineVariants)[number]; type Styled = Omit & { sx?: Sx; }; const danger = ":is([data-slot='code-block'][data-color='danger'] *)"; const numbered = ":is([data-numbered] *)"; const numberedSelf = ":is([data-numbered])"; const marks = "pre:not([data-numbered]):has([data-variant='added'], [data-variant='removed'])"; const marked = `:is(${marks} *)`; const markedSelf = `:is(${marks})`; const wrapped = ":is([data-wrap] *)"; const onBlock = ":is([data-slot='code-block'] > *)"; const besideFloating = ":is([data-slot='code-block']:has(> [data-slot='code-block-actions']) > * > *)"; const underHeader = ":is([data-slot='code-block']:has(> [data-slot='code-block-header']) > *)"; const overFooter = ":is([data-slot='code-block']:has(> [data-slot='code-block-footer']) > *)"; const pad = codeBlockVars.padInline; // The header icon's column: line numbers and diff marks sit in it, so code starts under the title. const gutter = `calc(${pad} + ${sizes.icon} + ${space.xs})`; const clearActions = `calc(${space.xs} + ${sizes.controlSm} + ${space.xs})`; const floating = ":is([data-slot='code-block']:has(> [data-slot='code-block-actions']) > *)"; const styles = stylex.create({ block: { [codeBlockVars.padBlock]: space.sm, [codeBlockVars.padInline]: space.md, backgroundColor: colors.fillSubtle, borderStartStartRadius: radii.md, borderStartEndRadius: radii.md, borderEndStartRadius: radii.md, borderEndEndRadius: radii.md, color: colors.textPrimary, display: "flex", flexDirection: "column", minWidth: 0, overflow: "hidden", position: "relative", width: "100%", }, sm: { [codeBlockVars.padBlock]: space.xs, [codeBlockVars.padInline]: space.sm, }, danger: { backgroundColor: colors.dangerSubtle, color: colors.dangerText }, header: { alignItems: "center", color: { default: colors.textSecondary, [danger]: colors.dangerText }, display: "flex", flexShrink: 0, gap: space.xs, minHeight: sizes.controlSm, minWidth: 0, paddingBlockStart: `calc(${codeBlockVars.padBlock} - ${space.xxs})`, paddingInlineEnd: space.xs, paddingInlineStart: pad, }, title: { color: { default: colors.textPrimary, [danger]: colors.dangerText }, fontFamily: fonts.sans, fontWeight: fontWeights.medium, minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", }, actions: { alignItems: "center", display: "flex", flexShrink: 0, gap: space.xxs, marginInlineStart: "auto", // Centered on the first line. insetBlockStart: { default: null, [onBlock]: `calc(${codeBlockVars.padBlock} + (${lineHeights.textSm} - ${sizes.controlSm}) / 2)`, }, // Physical, since the code under it is always left to right. right: { default: null, [onBlock]: space.xs }, position: { default: null, [onBlock]: "absolute" }, }, // The numbers' containing block, outside the scroller. content: { flexGrow: 1, fontFamily: fonts.mono, fontVariantLigatures: "none", lineHeight: lineHeights.textSm, minHeight: 0, minWidth: 0, paddingBlockEnd: { default: codeBlockVars.padBlock, [overFooter]: space.xxs, }, paddingBlockStart: { default: codeBlockVars.padBlock, [underHeader]: space.xxs, }, position: "relative", }, // The fade ends where the floating action starts, so code never shows beside it. contentBesideActions: { [scrollFadeVars.endInset]: { default: null, [floating]: clearActions }, }, // Never a containing block (no position, transform, filter, contain, container-type or will-change), or it would scroll and clip the numbers. pre: { fontFamily: "inherit", fontSize: "inherit", marginBlockEnd: 0, marginBlockStart: 0, // The numbers' column sits beside the scroller, never over it: code under a cover shows through at fractional scroll offsets. marginInlineStart: { default: 0, [numberedSelf]: gutter, [markedSelf]: gutter, }, minWidth: 0, overflow: "auto", // The scroll fade shows there's more, as in Suggestions. scrollbarWidth: "none", paddingInlineEnd: { default: pad, [besideFloating]: clearActions }, paddingInlineStart: { default: pad, [numberedSelf]: 0, [markedSelf]: 0 }, tabSize: 2, textAlign: "start", }, start: (line: number) => ({ counterReset: `line ${line}` }), wrap: { overflowWrap: "anywhere", whiteSpace: "pre-wrap", }, code: { display: "block", fontFamily: "inherit", minWidth: "100%", width: { default: "max-content", [wrapped]: "auto" }, }, // Not positioned, so its number and mark place against the content, outside the scroller. line: { counterIncrement: { default: null, [numbered]: "line" }, display: "block", marginInlineEnd: `calc(-1 * ${pad})`, marginInlineStart: { default: `calc(-1 * ${pad})`, [numbered]: 0, [marked]: 0, }, minHeight: lineHeights.textSm, paddingInlineEnd: pad, paddingInlineStart: { default: pad, [numbered]: 0, [marked]: 0 }, // Its block position is the line's own; only its inline position is set. "::before": { boxSizing: "border-box", color: colors.textMuted, content: { default: null, [numbered]: "counter(line) / ''" }, insetInlineStart: 0, paddingInlineEnd: space.xs, paddingInlineStart: pad, position: "absolute", textAlign: "end", userSelect: "none", width: gutter, }, // The diff mark: beside a number, or alone in the gutter, filled like its line. "::after": { boxSizing: "border-box", insetInlineStart: { default: space.xxs, [marked]: 0 }, paddingInlineEnd: { default: null, [marked]: space.xs }, paddingInlineStart: { default: null, [marked]: pad }, position: "absolute", textAlign: "end", userSelect: "none", width: { default: null, [marked]: gutter }, }, }, added: { backgroundColor: colors.successSubtle, "::after": { backgroundColor: colors.successSubtle, color: colors.successText, content: "'+'", }, "::before": { backgroundColor: colors.successSubtle }, }, removed: { backgroundColor: colors.dangerSubtle, "::after": { backgroundColor: colors.dangerSubtle, color: colors.dangerText, content: "'−'", }, "::before": { backgroundColor: colors.dangerSubtle }, }, highlighted: { backgroundColor: colors.fill, "::before": { backgroundColor: colors.fill }, }, footer: { alignItems: "center", color: { default: colors.textSecondary, [danger]: colors.dangerText }, display: "flex", flexShrink: 0, fontFamily: fonts.sans, gap: space.xs, minWidth: 0, paddingBlockEnd: codeBlockVars.padBlock, paddingInlineEnd: pad, paddingInlineStart: pad, }, }); const colorStyles = { danger: styles.danger, } satisfies Record; const lineVariantStyles = { added: styles.added, default: null, highlighted: styles.highlighted, removed: styles.removed, } satisfies Record; /** A tray of code. The app highlights it; the block lays it out. */ function CodeBlock({ size = "default", color, sx, ...props }: Styled> & { size?: CodeBlockSize; color?: CodeBlockColor; }) { return (

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

); } /** The file name or language, cut short on one line. */ function CodeBlockTitle({ render, sx, ...props }: Styled>) { return useRender({ defaultTagName: "div", props: mergeProps<"div">(props, stylex.props(styles.title, sx)), render, state: { slot: "code-block-title" }, }); } /** Buttons for the code: at the header's end, or floating on the first line when the block holds them itself. */ function CodeBlockActions({ sx, ...props }: Styled>) { return (

); } /** The code, scrolling sideways on its own (never down) and always left to right. A string with `lineNumbers` splits into lines; `sx` styles the wrapper, `ref` and the rest reach the `pre`. */ function CodeBlockContent({ children, lineNumbers = false, startLine = 1, sx, wrap = false, ...props }: Omit, "className" | "style"> & { lineNumbers?: boolean; startLine?: number; sx?: Sx; wrap?: boolean; }) { return (

        
          {/* oxlint-disable-next-line anti-slop/no-runtime-typeof -- `children` is documented as plain text or lines */}
          {lineNumbers && typeof children === "string"
            ? children
                .replace(/\n$/u, "")
                .split("\n")
                .map((line, index) => (
                  // oxlint-disable-next-line react/no-array-index-key -- a line's place is its identity
                  {line}
                ))
            : children}

); } /** One line, to mark it added, removed or highlighted. */ function CodeBlockLine({ children, sx, variant = "default", ...props }: Styled> & { children?: ReactNode; variant?: CodeBlockLineVariant; }) { // An empty line holds a newline, so a copied selection keeps it. const empty = children === undefined || children === null || children === "" || children === false || (Array.isArray(children) && children.length === 0); return ( {empty ? "\n" : children} ); } function CodeBlockFooter({ sx, ...props }: Styled>) { return (

); } export { CodeBlock, CodeBlockActions, CodeBlockContent, CodeBlockFooter, CodeBlockHeader, CodeBlockLine, codeBlockLineVariants, codeBlockSizes, CodeBlockTitle, codeBlockColors, }; export type { CodeBlockLineVariant, CodeBlockSize, CodeBlockColor }; 50:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@base-ui/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40base-ui%2Freact","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@base-ui/react"}]]}]}],["$","li","@stylexjs/stylex",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40stylexjs%2Fstylex","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@stylexjs/stylex"}]]}]}]]}],["$","$L51",null,{"namespace":"@constella","registryDependencies":["https://constella.aayush.cv/r/base.json","https://constella.aayush.cv/r/scroll-fade.json"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"src/components/ai/code-block.tsx","content":"$53","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]