npm - @langchain/macaw-components - Versions diffs - 1.0.0-beta.1 → 1.0.0-beta.7 - Mend

@langchain/macaw-components 1.0.0-beta.1 → 1.0.0-beta.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (188) hide show

package/dist/components/ChartCard/ChartCardSkeleton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ChartCardSkeleton.js","names":[],"sources":["../../../src/components/ChartCard/ChartCardSkeleton.tsx"],"sourcesContent":["import type { CSSProperties } from 'react';\n\nimport { cn } from '../../utils/cn';\nimport { Skeleton } from '../Skeleton';\n\nexport type ChartCardSkeletonVariant =\n \| 'bar'\n \| 'line'\n \| 'donut'\n \| 'metric'\n \| 'sparkline';\n\nconst BAR_HEIGHTS = ['35%', '62%', '48%', '78%', '55%', '70%', '42%'] as const;\n\nconst LegendSkeleton = () => (\n <div aria-hidden=\"true\" className=\"flex min-w-0 items-center gap-space-2\">\n <Skeleton className=\"h-4 w-20 motion-reduce:animate-none\" />\n <Skeleton className=\"h-4 w-24 motion-reduce:animate-none\" />\n <Skeleton className=\"h-4 w-16 motion-reduce:animate-none\" />\n </div>\n);\n\nconst Plot = ({ children }: { children: React.ReactNode }) => (\n <div className=\"relative min-h-0 flex-1 border-b border-l border-muted\">\n {/* Anchor percentage-sized marks to the plot even in auto-height cards. */}\n <div className=\"absolute inset-0 flex px-space-2\">{children}</div>\n </div>\n);\n\nexport const ChartCardSkeleton = ({\n variant,\n className,\n style,\n}: {\n variant: ChartCardSkeletonVariant;\n className?: string;\n style?: CSSProperties;\n}) => (\n <div\n role=\"status\"\n aria-label=\"Loading chart\"\n style={style}\n className={cn(\n 'flex min-h-[13.5rem] flex-1 flex-col gap-space-2',\n variant === 'metric' && 'min-h-0',\n className\n )}\n >\n {variant === 'bar' && (\n <Plot>\n <div className=\"flex size-full items-end gap-space-2\">\n {BAR_HEIGHTS.map((height, index) => (\n <Skeleton\n key={index}\n className=\"min-w-0 flex-1 rounded-b-none rounded-t-md motion-reduce:animate-none\"\n style={{ height }}\n />\n ))}\n </div>\n </Plot>\n )}\n {(variant === 'line' \|\| variant === 'sparkline') && (\n <Plot>\n <Skeleton\n className=\"size-full rounded-none motion-reduce:animate-none\"\n style={{\n clipPath:\n 'polygon(0 63%, 20% 43%, 38% 56%, 60% 26%, 78% 40%, 100% 13%, 100% 17%, 78% 44%, 60% 30%, 38% 60%, 20% 47%, 0 67%)',\n }}\n />\n </Plot>\n )}\n {variant === 'donut' && (\n <div className=\"flex min-h-0 flex-1 items-center justify-center\">\n <div className=\"size-32 animate-pulse rounded-full border-[1.5rem] border-muted motion-reduce:animate-none\" />\n </div>\n )}\n {variant === 'metric' && (\n <div className=\"flex min-h-0 flex-1 flex-col justify-center gap-space-2\">\n <Skeleton className=\"h-9 w-1/2 motion-reduce:animate-none\" />\n <Skeleton className=\"h-4 w-2/3 motion-reduce:animate-none\" />\n </div>\n )}\n {variant !== 'metric' && <LegendSkeleton />}\n </div>\n);\n"],"mappings":";;;;~~AAYA~~,IAAM,cAAc;CAAC;CAAO;CAAO;CAAO;CAAO;CAAO;CAAO;AAAK;AAEpE,IAAM,uBACJ,qBAAC,OAAD;CAAK,eAAY;CAAO,WAAU;CAAlC,UAAA;EACE,oBAAC,UAAD,EAAU,WAAU,sCAAuC,CAAA;EAC3D,oBAAC,UAAD,EAAU,WAAU,sCAAuC,CAAA;EAC3D,oBAAC,UAAD,EAAU,WAAU,sCAAuC,CAAA;CACxD;;AAGP,IAAM,QAAQ,EAAE,eACd,oBAAC,OAAD;CAAK,WAAU;CAEb,UAAA,oBAAC,OAAD;EAAK,WAAU;EAAoC;CAAc,CAAA;AAC9D,CAAA;AAGP,IAAa,qBAAqB,EAChC,SACA,WACA,YAMA,qBAAC,OAAD;CACE,MAAK;CACL,cAAW;CACJ;CACP,WAAW,GACT,oDACA,YAAY,YAAY,WACxB,SACF;CARF,UAAA;EAUG,YAAY,SACX,oBAAC,MAAD,EAAA,UACE,oBAAC,OAAD;GAAK,WAAU;GACZ,UAAA,YAAY,KAAK,QAAQ,UACxB,oBAAC,UAAD;IAEE,WAAU;IACV,OAAO,EAAE,OAAO;GACjB,GAHM,KAGN,CACF;EACE,CAAA,EACD,CAAA;GAEN,YAAY,UAAU,YAAY,gBAClC,oBAAC,MAAD,EAAA,UACE,oBAAC,UAAD;GACE,WAAU;GACV,OAAO,EACL,UACE,oHACJ;EACD,CAAA,EACG,CAAA;EAEP,YAAY,WACX,oBAAC,OAAD;GAAK,WAAU;GACb,UAAA,oBAAC,OAAD,EAAK,WAAU,6FAA8F,CAAA;EAC1G,CAAA;EAEN,YAAY,YACX,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,oBAAC,UAAD,EAAU,WAAU,uCAAwC,CAAA,GAC5D,oBAAC,UAAD,EAAU,WAAU,uCAAwC,CAAA,CACzD;;EAEN,YAAY,YAAY,oBAAC,gBAAD,CAAiB,CAAA;CACvC"}
1	+ {"version":3,"file":"ChartCardSkeleton.js","names":[],"sources":["../../../src/components/ChartCard/ChartCardSkeleton.tsx"],"sourcesContent":["import type { CSSProperties } from 'react';\n\nimport { cn } from '../../utils/cn';\nimport { Skeleton } from '../Skeleton';\n\nexport type ChartCardSkeletonVariant =\n \| 'bar'\n \| 'line'\n \| 'donut'\n \| 'metric'\n \| 'sparkline'\n \| 'sankey';\n\nconst BAR_HEIGHTS = ['35%', '62%', '48%', '78%', '55%', '70%', '42%'] as const;\n\nconst LegendSkeleton = () => (\n <div aria-hidden=\"true\" className=\"flex min-w-0 items-center gap-space-2\">\n <Skeleton className=\"h-4 w-20 motion-reduce:animate-none\" />\n <Skeleton className=\"h-4 w-24 motion-reduce:animate-none\" />\n <Skeleton className=\"h-4 w-16 motion-reduce:animate-none\" />\n </div>\n);\n\nconst Plot = ({ children }: { children: React.ReactNode }) => (\n <div className=\"relative min-h-0 flex-1 border-b border-l border-muted\">\n {/* Anchor percentage-sized marks to the plot even in auto-height cards. */}\n <div className=\"absolute inset-0 flex px-space-2\">{children}</div>\n </div>\n);\n\nexport const ChartCardSkeleton = ({\n variant,\n className,\n style,\n}: {\n variant: ChartCardSkeletonVariant;\n className?: string;\n style?: CSSProperties;\n}) => (\n <div\n role=\"status\"\n aria-label=\"Loading chart\"\n style={style}\n className={cn(\n 'flex min-h-[13.5rem] flex-1 flex-col gap-space-2',\n variant === 'metric' && 'min-h-0',\n className\n )}\n >\n {variant === 'bar' && (\n <Plot>\n <div className=\"flex size-full items-end gap-space-2\">\n {BAR_HEIGHTS.map((height, index) => (\n <Skeleton\n key={index}\n className=\"min-w-0 flex-1 rounded-b-none rounded-t-md motion-reduce:animate-none\"\n style={{ height }}\n />\n ))}\n </div>\n </Plot>\n )}\n {(variant === 'line' \|\| variant === 'sparkline') && (\n <Plot>\n <Skeleton\n className=\"size-full rounded-none motion-reduce:animate-none\"\n style={{\n clipPath:\n 'polygon(0 63%, 20% 43%, 38% 56%, 60% 26%, 78% 40%, 100% 13%, 100% 17%, 78% 44%, 60% 30%, 38% 60%, 20% 47%, 0 67%)',\n }}\n />\n </Plot>\n )}\n {variant === 'donut' && (\n <div className=\"flex min-h-0 flex-1 items-center justify-center\">\n <div className=\"size-32 animate-pulse rounded-full border-[1.5rem] border-muted motion-reduce:animate-none\" />\n </div>\n )}\n {variant === 'sankey' && (\n <div aria-hidden=\"true\" className=\"relative min-h-0 flex-1\">\n <svg\n viewBox=\"0 0 400 192\"\n preserveAspectRatio=\"none\"\n focusable=\"false\"\n fill=\"var(--bg-surface-level-3)\"\n className=\"absolute inset-0 size-full animate-pulse motion-reduce:animate-none\"\n >\n <g opacity={0.5}>\n {[0, 184].map((offset) => (\n <g key={offset} transform={`translate(${offset} 0)`}>\n <path d=\"M20 12H196V60H20Z\" />\n <path d=\"M20 60C108 60 108 108 196 108V132C108 132 108 84 20 84Z\" />\n <path d=\"M20 108C108 108 108 60 196 60V84C108 84 108 132 20 132Z\" />\n <path d=\"M20 132H196V180H20Z\" />\n </g>\n ))}\n </g>\n {[12, 196, 380].map((x) => (\n <g key={x}>\n <rect x={x} y={12} width={8} height={72} />\n <rect x={x} y={108} width={8} height={72} />\n </g>\n ))}\n </svg>\n </div>\n )}\n {variant === 'metric' && (\n <div className=\"flex min-h-0 flex-1 flex-col justify-center gap-space-2\">\n <Skeleton className=\"h-9 w-1/2 motion-reduce:animate-none\" />\n <Skeleton className=\"h-4 w-2/3 motion-reduce:animate-none\" />\n </div>\n )}\n {variant !== 'metric' && <LegendSkeleton />}\n </div>\n);\n"],"mappings":";;;;AAaA,IAAM,cAAc;CAAC;CAAO;CAAO;CAAO;CAAO;CAAO;CAAO;AAAK;AAEpE,IAAM,uBACJ,qBAAC,OAAD;CAAK,eAAY;CAAO,WAAU;CAAlC,UAAA;EACE,oBAAC,UAAD,EAAU,WAAU,sCAAuC,CAAA;EAC3D,oBAAC,UAAD,EAAU,WAAU,sCAAuC,CAAA;EAC3D,oBAAC,UAAD,EAAU,WAAU,sCAAuC,CAAA;CACxD;;AAGP,IAAM,QAAQ,EAAE,eACd,oBAAC,OAAD;CAAK,WAAU;CAEb,UAAA,oBAAC,OAAD;EAAK,WAAU;EAAoC;CAAc,CAAA;AAC9D,CAAA;AAGP,IAAa,qBAAqB,EAChC,SACA,WACA,YAMA,qBAAC,OAAD;CACE,MAAK;CACL,cAAW;CACJ;CACP,WAAW,GACT,oDACA,YAAY,YAAY,WACxB,SACF;CARF,UAAA;EAUG,YAAY,SACX,oBAAC,MAAD,EAAA,UACE,oBAAC,OAAD;GAAK,WAAU;GACZ,UAAA,YAAY,KAAK,QAAQ,UACxB,oBAAC,UAAD;IAEE,WAAU;IACV,OAAO,EAAE,OAAO;GACjB,GAHM,KAGN,CACF;EACE,CAAA,EACD,CAAA;GAEN,YAAY,UAAU,YAAY,gBAClC,oBAAC,MAAD,EAAA,UACE,oBAAC,UAAD;GACE,WAAU;GACV,OAAO,EACL,UACE,oHACJ;EACD,CAAA,EACG,CAAA;EAEP,YAAY,WACX,oBAAC,OAAD;GAAK,WAAU;GACb,UAAA,oBAAC,OAAD,EAAK,WAAU,6FAA8F,CAAA;EAC1G,CAAA;EAEN,YAAY,YACX,oBAAC,OAAD;GAAK,eAAY;GAAO,WAAU;GAChC,UAAA,qBAAC,OAAD;IACE,SAAQ;IACR,qBAAoB;IACpB,WAAU;IACV,MAAK;IACL,WAAU;IALZ,UAAA,CAOE,oBAAC,KAAD;KAAG,SAAS;KACT,UAAA,CAAC,GAAG,GAAG,CAAC,CAAC,KAAK,WACb,qBAAC,KAAD;MAAgB,WAAW,aAAa,OAAO;MAA/C,UAAA;OACE,oBAAC,QAAD,EAAM,GAAE,oBAAqB,CAAA;OAC7B,oBAAC,QAAD,EAAM,GAAE,0DAA2D,CAAA;OACnE,oBAAC,QAAD,EAAM,GAAE,0DAA2D,CAAA;OACnE,oBAAC,QAAD,EAAM,GAAE,sBAAuB,CAAA;MAC9B;KALK,GAAA,MAKL,CACJ;IACA,CAAA,GACF;KAAC;KAAI;KAAK;IAAG,CAAC,CAAC,KAAK,MACnB,qBAAC,KAAD,EAAA,UAAA,CACE,oBAAC,QAAD;KAAS;KAAG,GAAG;KAAI,OAAO;KAAG,QAAQ;IAAK,CAAA,GAC1C,oBAAC,QAAD;KAAS;KAAG,GAAG;KAAK,OAAO;KAAG,QAAQ;IAAK,CAAA,CAC1C,EAAA,GAHK,CAGL,CACJ,CACE;;EACF,CAAA;EAEN,YAAY,YACX,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,oBAAC,UAAD,EAAU,WAAU,uCAAwC,CAAA,GAC5D,oBAAC,UAAD,EAAU,WAAU,uCAAwC,CAAA,CACzD;;EAEN,YAAY,YAAY,oBAAC,gBAAD,CAAiB,CAAA;CACvC"}

package/dist/components/ChartLegend/ChartLegend.js CHANGED Viewed

@@ -1,8 +1,8 @@
 import { cn } from "../../utils/cn.js";
-import { Tooltip } from "../Tooltip/Tooltip.js";
 import { Badge } from "../Badge/Badge.js";
-import { SPACE_SCALE_PX } from "../../utils/spacing.js";
 import { Button } from "../Button/Button.js";
+import { Tooltip } from "../Tooltip/Tooltip.js";
+import { SPACE_SCALE_PX } from "../../utils/spacing.js";
 import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from "../Popover/Popover.js";
 import { getChartLegendListColumns, getChartLegendListGridTemplate, widthsMatch } from "./utils.js";
 import { ChartLegendItemRenderer } from "./ChartLegendItemRenderer.js";

package/dist/components/ChartLegend/ChartLegendItemRenderer.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { cn } from "../../utils/cn.js";
 import { Text } from "../Text/Text.js";
-import { Icon } from "../Icon/Icon.js";
 import { Button } from "../Button/Button.js";
+import { Icon } from "../Icon/Icon.js";
 import { getChartLegendAriaLabel } from "./utils.js";
 import { useEffect, useEffectEvent, useId } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -71,7 +71,7 @@ var ChartLegendItemRenderer = ({ item, onClick, onActiveChange, className, tabIn
 		size: "xs",
 		color: "secondary",
 		variant: "plain",
-		className: cn(styles, "focus-visible:ring-focus border-transparent shadow-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset", isList && "justify-start", !item.selected && "bg-transparent"),
+		className: cn(styles, "focus-visible:ring-focus border-transparent shadow-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset", isList && "h-auto justify-start", !item.selected && "bg-transparent"),
 		"aria-label": ariaLabel,
 		"aria-labelledby": ariaLabel == null ? labelId : void 0,
 		"aria-pressed": item.selected ?? false,

package/dist/components/ChartLegend/ChartLegendItemRenderer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ChartLegendItemRenderer.js","names":[],"sources":["../../../src/components/ChartLegend/ChartLegendItemRenderer.tsx"],"sourcesContent":["import { useEffect, useEffectEvent, useId } from 'react';\n\nimport { FunnelIcon } from '@phosphor-icons/react/dist/ssr/Funnel';\n\nimport { cn } from '../../utils/cn';\nimport { Button } from '../Button';\nimport { Icon } from '../Icon';\nimport { Text } from '../Text';\nimport type { ChartLegendItem } from './ChartLegend';\nimport type { ChartLegendItemActiveChangeHandler } from './useChartLegendActiveItem';\nimport { getChartLegendAriaLabel, type ChartLegendListColumns } from './utils';\n\ntype ChartLegendItemRendererProps = {\n item: ChartLegendItem;\n onClick?: () => void;\n onActiveChange?: ChartLegendItemActiveChangeHandler<ChartLegendItem>;\n className?: string;\n tabIndex?: number;\n layout?: 'inline' \| 'list';\n listColumns?: ChartLegendListColumns;\n};\n\nexport const ChartLegendItemRenderer = ({\n item,\n onClick,\n onActiveChange,\n className,\n tabIndex,\n layout = 'inline',\n listColumns,\n}: ChartLegendItemRendererProps) => {\n const labelId = useId();\n const clearActivity = useEffectEvent(() => {\n onActiveChange?.(item, 'pointer', false);\n onActiveChange?.(item, 'focus', false);\n });\n // Removing a focused or hovered row does not fire blur or pointerleave.\n useEffect(() => () => clearActivity(), []);\n\n const isList = layout === 'list';\n const defaultAriaLabel = getChartLegendAriaLabel(\n item.label,\n isList ? item.value : undefined,\n isList ? item.secondaryValue : undefined\n );\n const ariaLabel = item['aria-label'] ?? defaultAriaLabel;\n const marker =\n item.marker ??\n (item.markerColor != null ? (\n <div\n aria-hidden\n className=\"size-2 shrink-0 rounded-full\"\n style={{ backgroundColor: item.markerColor }}\n />\n ) : null);\n const action =\n onClick != null \|\| item.selected ? (\n <Icon\n aria-hidden=\"true\"\n icon={FunnelIcon}\n weight={item.selected ? 'fill' : undefined}\n size=\"xs\"\n className={cn(\n 'size-3 shrink-0 text-icon-tertiary transition-opacity duration-fast',\n item.selected\n ? 'opacity-100'\n : 'opacity-0 group-hover:opacity-100 group-focus-visible:opacity-100'\n )}\n />\n ) : null;\n const content = (\n <>\n {isList && listColumns?.marker ? (marker ?? <div aria-hidden />) : marker}\n <Text\n id={labelId}\n as=\"span\"\n variant=\"xs\"\n className={cn(\n 'min-w-0 flex-1 text-left',\n isList ? 'whitespace-normal break-words' : 'truncate'\n )}\n >\n {item.label}\n </Text>\n {isList &&\n listColumns?.value &&\n (item.value != null ? (\n <Text\n as=\"span\"\n variant=\"xs\"\n className=\"shrink-0 text-right tabular-nums\"\n >\n {item.value}\n </Text>\n ) : (\n <div aria-hidden />\n ))}\n {isList &&\n listColumns?.secondaryValue &&\n (item.secondaryValue != null ? (\n <Text\n as=\"span\"\n variant=\"xs\"\n color=\"tertiary\"\n className=\"shrink-0 text-right tabular-nums\"\n >\n {item.secondaryValue}\n </Text>\n ) : (\n <div aria-hidden />\n ))}\n {isList && listColumns?.action ? (action ?? <div aria-hidden />) : action}\n </>\n );\n\n const styles = cn(\n 'group relative min-w-0 items-center rounded-xs py-space-1 text-primary transition-colors duration-fast',\n isList\n ? 'col-span-full grid w-full grid-cols-subgrid gap-space-2 px-space-2'\n : 'flex max-w-full shrink-0 gap-space-1 px-space-1',\n item.selected\n ? 'bg-surface-level-3 hover:bg-surface-level-3'\n : (onClick != null \|\| onActiveChange != null) &&\n 'hover:bg-surface-level-1-hover focus-visible:bg-surface-level-1-hover',\n className\n );\n\n if (onClick == null) {\n return (\n <div\n className={cn(\n styles,\n onActiveChange != null &&\n 'focus-visible:ring-focus focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset'\n )}\n role={onActiveChange == null ? undefined : 'group'}\n aria-label={onActiveChange == null ? undefined : ariaLabel}\n aria-labelledby={\n onActiveChange != null && ariaLabel == null ? labelId : undefined\n }\n tabIndex={onActiveChange == null ? tabIndex : (tabIndex ?? 0)}\n onPointerEnter={() => onActiveChange?.(item, 'pointer', true)}\n onPointerLeave={() => onActiveChange?.(item, 'pointer', false)}\n onFocus={() => onActiveChange?.(item, 'focus', true)}\n onBlur={() => onActiveChange?.(item, 'focus', false)}\n >\n {content}\n </div>\n );\n }\n\n return (\n <Button\n type=\"button\"\n size=\"xs\"\n color=\"secondary\"\n variant=\"plain\"\n className={cn(\n styles,\n 'focus-visible:ring-focus border-transparent shadow-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset',\n isList && 'justify-start',\n !item.selected && 'bg-transparent'\n )}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabel == null ? labelId : undefined}\n aria-pressed={item.selected ?? false}\n tabIndex={tabIndex}\n onPointerEnter={() => onActiveChange?.(item, 'pointer', true)}\n onPointerLeave={() => onActiveChange?.(item, 'pointer', false)}\n onFocus={() => onActiveChange?.(item, 'focus', true)}\n onBlur={() => onActiveChange?.(item, 'focus', false)}\n onClick={onClick}\n >\n {content}\n </Button>\n );\n};\n"],"mappings":";;;;;;;;;AAsBA,IAAa,2BAA2B,EACtC,MACA,SACA,gBACA,WACA,UACA,SAAS,UACT,kBACkC;CAClC,MAAM,UAAU,MAAM;CACtB,MAAM,gBAAgB,qBAAqB;EACzC,iBAAiB,MAAM,WAAW,KAAK;EACvC,iBAAiB,MAAM,SAAS,KAAK;CACvC,CAAC;CAED,sBAAsB,cAAc,GAAG,CAAC,CAAC;CAEzC,MAAM,SAAS,WAAW;CAC1B,MAAM,mBAAmB,wBACvB,KAAK,OACL,SAAS,KAAK,QAAQ,KAAA,GACtB,SAAS,KAAK,iBAAiB,KAAA,CACjC;CACA,MAAM,YAAY,KAAK,iBAAiB;CACxC,MAAM,SACJ,KAAK,WACJ,KAAK,eAAe,OACnB,oBAAC,OAAD;EACE,eAAA;EACA,WAAU;EACV,OAAO,EAAE,iBAAiB,KAAK,YAAY;CAC5C,CAAA,IACC;CACN,MAAM,SACJ,WAAW,QAAQ,KAAK,WACtB,oBAAC,MAAD;EACE,eAAY;EACZ,MAAM;EACN,QAAQ,KAAK,WAAW,SAAS,KAAA;EACjC,MAAK;EACL,WAAW,GACT,uEACA,KAAK,WACD,gBACA,mEACN;CACD,CAAA,IACC;CACN,MAAM,UACJ,qBAAA,YAAA,EAAA,UAAA;EACG,UAAU,aAAa,SAAU,UAAU,oBAAC,OAAD,EAAK,eAAA,KAAa,CAAA,IAAK;EACnE,oBAAC,MAAD;GACE,IAAI;GACJ,IAAG;GACH,SAAQ;GACR,WAAW,GACT,4BACA,SAAS,kCAAkC,UAC7C;GAEC,UAAA,KAAK;EACF,CAAA;EACL,UACC,aAAa,UACZ,KAAK,SAAS,OACb,oBAAC,MAAD;GACE,IAAG;GACH,SAAQ;GACR,WAAU;GAET,UAAA,KAAK;EACF,CAAA,IAEN,oBAAC,OAAD,EAAK,eAAA,KAAa,CAAA;EAErB,UACC,aAAa,mBACZ,KAAK,kBAAkB,OACtB,oBAAC,MAAD;GACE,IAAG;GACH,SAAQ;GACR,OAAM;GACN,WAAU;GAET,UAAA,KAAK;EACF,CAAA,IAEN,oBAAC,OAAD,EAAK,eAAA,KAAa,CAAA;EAErB,UAAU,aAAa,SAAU,UAAU,oBAAC,OAAD,EAAK,eAAA,KAAa,CAAA,IAAK;CACnE,EAAA,CAAA;CAGJ,MAAM,SAAS,GACb,0GACA,SACI,uEACA,mDACJ,KAAK,WACD,iDACC,WAAW,QAAQ,kBAAkB,SACpC,yEACN,SACF;CAEA,IAAI,WAAW,MACb,OACE,oBAAC,OAAD;EACE,WAAW,GACT,QACA,kBAAkB,QAChB,mGACJ;EACA,MAAM,kBAAkB,OAAO,KAAA,IAAY;EAC3C,cAAY,kBAAkB,OAAO,KAAA,IAAY;EACjD,mBACE,kBAAkB,QAAQ,aAAa,OAAO,UAAU,KAAA;EAE1D,UAAU,kBAAkB,OAAO,WAAY,YAAY;EAC3D,sBAAsB,iBAAiB,MAAM,WAAW,IAAI;EAC5D,sBAAsB,iBAAiB,MAAM,WAAW,KAAK;EAC7D,eAAe,iBAAiB,MAAM,SAAS,IAAI;EACnD,cAAc,iBAAiB,MAAM,SAAS,KAAK;EAElD,UAAA;CACE,CAAA;CAIT,OACE,oBAAC,QAAD;EACE,MAAK;EACL,MAAK;EACL,OAAM;EACN,SAAQ;EACR,WAAW,GACT,QACA,oIACA,UAAU,~~iBACV~~,CAAC,KAAK,YAAY,gBACpB;EACA,cAAY;EACZ,mBAAiB,aAAa,OAAO,UAAU,KAAA;EAC/C,gBAAc,KAAK,YAAY;EACrB;EACV,sBAAsB,iBAAiB,MAAM,WAAW,IAAI;EAC5D,sBAAsB,iBAAiB,MAAM,WAAW,KAAK;EAC7D,eAAe,iBAAiB,MAAM,SAAS,IAAI;EACnD,cAAc,iBAAiB,MAAM,SAAS,KAAK;EAC1C;EAER,UAAA;CACK,CAAA;AAEZ"}
1	+ {"version":3,"file":"ChartLegendItemRenderer.js","names":[],"sources":["../../../src/components/ChartLegend/ChartLegendItemRenderer.tsx"],"sourcesContent":["import { useEffect, useEffectEvent, useId } from 'react';\n\nimport { FunnelIcon } from '@phosphor-icons/react/dist/ssr/Funnel';\n\nimport { cn } from '../../utils/cn';\nimport { Button } from '../Button';\nimport { Icon } from '../Icon';\nimport { Text } from '../Text';\nimport type { ChartLegendItem } from './ChartLegend';\nimport type { ChartLegendItemActiveChangeHandler } from './useChartLegendActiveItem';\nimport { getChartLegendAriaLabel, type ChartLegendListColumns } from './utils';\n\ntype ChartLegendItemRendererProps = {\n item: ChartLegendItem;\n onClick?: () => void;\n onActiveChange?: ChartLegendItemActiveChangeHandler<ChartLegendItem>;\n className?: string;\n tabIndex?: number;\n layout?: 'inline' \| 'list';\n listColumns?: ChartLegendListColumns;\n};\n\nexport const ChartLegendItemRenderer = ({\n item,\n onClick,\n onActiveChange,\n className,\n tabIndex,\n layout = 'inline',\n listColumns,\n}: ChartLegendItemRendererProps) => {\n const labelId = useId();\n const clearActivity = useEffectEvent(() => {\n onActiveChange?.(item, 'pointer', false);\n onActiveChange?.(item, 'focus', false);\n });\n // Removing a focused or hovered row does not fire blur or pointerleave.\n useEffect(() => () => clearActivity(), []);\n\n const isList = layout === 'list';\n const defaultAriaLabel = getChartLegendAriaLabel(\n item.label,\n isList ? item.value : undefined,\n isList ? item.secondaryValue : undefined\n );\n const ariaLabel = item['aria-label'] ?? defaultAriaLabel;\n const marker =\n item.marker ??\n (item.markerColor != null ? (\n <div\n aria-hidden\n className=\"size-2 shrink-0 rounded-full\"\n style={{ backgroundColor: item.markerColor }}\n />\n ) : null);\n const action =\n onClick != null \|\| item.selected ? (\n <Icon\n aria-hidden=\"true\"\n icon={FunnelIcon}\n weight={item.selected ? 'fill' : undefined}\n size=\"xs\"\n className={cn(\n 'size-3 shrink-0 text-icon-tertiary transition-opacity duration-fast',\n item.selected\n ? 'opacity-100'\n : 'opacity-0 group-hover:opacity-100 group-focus-visible:opacity-100'\n )}\n />\n ) : null;\n const content = (\n <>\n {isList && listColumns?.marker ? (marker ?? <div aria-hidden />) : marker}\n <Text\n id={labelId}\n as=\"span\"\n variant=\"xs\"\n className={cn(\n 'min-w-0 flex-1 text-left',\n isList ? 'whitespace-normal break-words' : 'truncate'\n )}\n >\n {item.label}\n </Text>\n {isList &&\n listColumns?.value &&\n (item.value != null ? (\n <Text\n as=\"span\"\n variant=\"xs\"\n className=\"shrink-0 text-right tabular-nums\"\n >\n {item.value}\n </Text>\n ) : (\n <div aria-hidden />\n ))}\n {isList &&\n listColumns?.secondaryValue &&\n (item.secondaryValue != null ? (\n <Text\n as=\"span\"\n variant=\"xs\"\n color=\"tertiary\"\n className=\"shrink-0 text-right tabular-nums\"\n >\n {item.secondaryValue}\n </Text>\n ) : (\n <div aria-hidden />\n ))}\n {isList && listColumns?.action ? (action ?? <div aria-hidden />) : action}\n </>\n );\n\n const styles = cn(\n 'group relative min-w-0 items-center rounded-xs py-space-1 text-primary transition-colors duration-fast',\n isList\n ? 'col-span-full grid w-full grid-cols-subgrid gap-space-2 px-space-2'\n : 'flex max-w-full shrink-0 gap-space-1 px-space-1',\n item.selected\n ? 'bg-surface-level-3 hover:bg-surface-level-3'\n : (onClick != null \|\| onActiveChange != null) &&\n 'hover:bg-surface-level-1-hover focus-visible:bg-surface-level-1-hover',\n className\n );\n\n if (onClick == null) {\n return (\n <div\n className={cn(\n styles,\n onActiveChange != null &&\n 'focus-visible:ring-focus focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset'\n )}\n role={onActiveChange == null ? undefined : 'group'}\n aria-label={onActiveChange == null ? undefined : ariaLabel}\n aria-labelledby={\n onActiveChange != null && ariaLabel == null ? labelId : undefined\n }\n tabIndex={onActiveChange == null ? tabIndex : (tabIndex ?? 0)}\n onPointerEnter={() => onActiveChange?.(item, 'pointer', true)}\n onPointerLeave={() => onActiveChange?.(item, 'pointer', false)}\n onFocus={() => onActiveChange?.(item, 'focus', true)}\n onBlur={() => onActiveChange?.(item, 'focus', false)}\n >\n {content}\n </div>\n );\n }\n\n return (\n <Button\n type=\"button\"\n size=\"xs\"\n color=\"secondary\"\n variant=\"plain\"\n className={cn(\n styles,\n 'focus-visible:ring-focus border-transparent shadow-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset',\n isList && 'h-auto justify-start',\n !item.selected && 'bg-transparent'\n )}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabel == null ? labelId : undefined}\n aria-pressed={item.selected ?? false}\n tabIndex={tabIndex}\n onPointerEnter={() => onActiveChange?.(item, 'pointer', true)}\n onPointerLeave={() => onActiveChange?.(item, 'pointer', false)}\n onFocus={() => onActiveChange?.(item, 'focus', true)}\n onBlur={() => onActiveChange?.(item, 'focus', false)}\n onClick={onClick}\n >\n {content}\n </Button>\n );\n};\n"],"mappings":";;;;;;;;;AAsBA,IAAa,2BAA2B,EACtC,MACA,SACA,gBACA,WACA,UACA,SAAS,UACT,kBACkC;CAClC,MAAM,UAAU,MAAM;CACtB,MAAM,gBAAgB,qBAAqB;EACzC,iBAAiB,MAAM,WAAW,KAAK;EACvC,iBAAiB,MAAM,SAAS,KAAK;CACvC,CAAC;CAED,sBAAsB,cAAc,GAAG,CAAC,CAAC;CAEzC,MAAM,SAAS,WAAW;CAC1B,MAAM,mBAAmB,wBACvB,KAAK,OACL,SAAS,KAAK,QAAQ,KAAA,GACtB,SAAS,KAAK,iBAAiB,KAAA,CACjC;CACA,MAAM,YAAY,KAAK,iBAAiB;CACxC,MAAM,SACJ,KAAK,WACJ,KAAK,eAAe,OACnB,oBAAC,OAAD;EACE,eAAA;EACA,WAAU;EACV,OAAO,EAAE,iBAAiB,KAAK,YAAY;CAC5C,CAAA,IACC;CACN,MAAM,SACJ,WAAW,QAAQ,KAAK,WACtB,oBAAC,MAAD;EACE,eAAY;EACZ,MAAM;EACN,QAAQ,KAAK,WAAW,SAAS,KAAA;EACjC,MAAK;EACL,WAAW,GACT,uEACA,KAAK,WACD,gBACA,mEACN;CACD,CAAA,IACC;CACN,MAAM,UACJ,qBAAA,YAAA,EAAA,UAAA;EACG,UAAU,aAAa,SAAU,UAAU,oBAAC,OAAD,EAAK,eAAA,KAAa,CAAA,IAAK;EACnE,oBAAC,MAAD;GACE,IAAI;GACJ,IAAG;GACH,SAAQ;GACR,WAAW,GACT,4BACA,SAAS,kCAAkC,UAC7C;GAEC,UAAA,KAAK;EACF,CAAA;EACL,UACC,aAAa,UACZ,KAAK,SAAS,OACb,oBAAC,MAAD;GACE,IAAG;GACH,SAAQ;GACR,WAAU;GAET,UAAA,KAAK;EACF,CAAA,IAEN,oBAAC,OAAD,EAAK,eAAA,KAAa,CAAA;EAErB,UACC,aAAa,mBACZ,KAAK,kBAAkB,OACtB,oBAAC,MAAD;GACE,IAAG;GACH,SAAQ;GACR,OAAM;GACN,WAAU;GAET,UAAA,KAAK;EACF,CAAA,IAEN,oBAAC,OAAD,EAAK,eAAA,KAAa,CAAA;EAErB,UAAU,aAAa,SAAU,UAAU,oBAAC,OAAD,EAAK,eAAA,KAAa,CAAA,IAAK;CACnE,EAAA,CAAA;CAGJ,MAAM,SAAS,GACb,0GACA,SACI,uEACA,mDACJ,KAAK,WACD,iDACC,WAAW,QAAQ,kBAAkB,SACpC,yEACN,SACF;CAEA,IAAI,WAAW,MACb,OACE,oBAAC,OAAD;EACE,WAAW,GACT,QACA,kBAAkB,QAChB,mGACJ;EACA,MAAM,kBAAkB,OAAO,KAAA,IAAY;EAC3C,cAAY,kBAAkB,OAAO,KAAA,IAAY;EACjD,mBACE,kBAAkB,QAAQ,aAAa,OAAO,UAAU,KAAA;EAE1D,UAAU,kBAAkB,OAAO,WAAY,YAAY;EAC3D,sBAAsB,iBAAiB,MAAM,WAAW,IAAI;EAC5D,sBAAsB,iBAAiB,MAAM,WAAW,KAAK;EAC7D,eAAe,iBAAiB,MAAM,SAAS,IAAI;EACnD,cAAc,iBAAiB,MAAM,SAAS,KAAK;EAElD,UAAA;CACE,CAAA;CAIT,OACE,oBAAC,QAAD;EACE,MAAK;EACL,MAAK;EACL,OAAM;EACN,SAAQ;EACR,WAAW,GACT,QACA,oIACA,UAAU,wBACV,CAAC,KAAK,YAAY,gBACpB;EACA,cAAY;EACZ,mBAAiB,aAAa,OAAO,UAAU,KAAA;EAC/C,gBAAc,KAAK,YAAY;EACrB;EACV,sBAAsB,iBAAiB,MAAM,WAAW,IAAI;EAC5D,sBAAsB,iBAAiB,MAAM,WAAW,KAAK;EAC7D,eAAe,iBAAiB,MAAM,SAAS,IAAI;EACnD,cAAc,iBAAiB,MAAM,SAAS,KAAK;EAC1C;EAER,UAAA;CACK,CAAA;AAEZ"}

package/dist/components/Code/Code.utils.d.ts CHANGED Viewed

@@ -13,12 +13,13 @@ type SyntaxThemeOptions = {
         background?: string;
     };
 };
-export declare function getSyntaxTheme(cm: CMBundle, isDarkMode: boolean, options?: SyntaxThemeOptions): any;
+export declare function getSyntaxTheme(cm: CMBundle, isDarkMode: boolean, options?: SyntaxThemeOptions): Extension;
 export declare function getLanguageExtension(cm: CMBundle, language: CodeLanguageType): {
     language: Extension;
     extensions?: Extension[];
 };
 export declare const foldAllExceptRoot: (cm: CMBundle) => (view: EditorView) => boolean;
-export declare const useEditorTheme: (cm: CMBundle | null, { variant, }: {
+export declare const useEditorTheme: (cm: CMBundle | null, { variant, showFoldGutter, }: {
     variant?: "plain" | "full";
+    showFoldGutter?: boolean;
 }) => Extension | null;

package/dist/components/Code/Code.utils.js CHANGED Viewed

@@ -1,3 +1,4 @@
+import { SPACE_SCALE_PX } from "../../utils/spacing.js";
 import { useMemo } from "react";
 import * as YAML from "yaml";
 //#region packages/components/src/components/Code/Code.utils.tsx
@@ -6,6 +7,7 @@ var passthroughConverter = {
 	stringify: (value) => String(value)
 };
 var DATA_CONVERTERS = {
+	plaintext: passthroughConverter,
 	json: {
 		parse: (value) => JSON.parse(value),
 		stringify: (value) => JSON.stringify(value, null, 2)
@@ -78,6 +80,7 @@ function buildYamlLanguage(cm) {
 }
 function getLanguageExtension(cm, language) {
 	const { langJson, langJavascript, langPython, langMarkdown, StreamLanguage, legacyModeShell } = cm;
+	if (language === "plaintext") return { language: [] };
 	if (language === "yaml") return buildYamlLanguage(cm);
 	if (language === "json") return { language: langJson() };
 	if (language === "javascript") return { language: langJavascript() };
@@ -100,7 +103,7 @@ var foldAllExceptRoot = (cm) => (view) => {
 	if (effects.length) view.dispatch({ effects });
 	return !!effects.length;
 };
-var useEditorTheme = (cm, { variant }) => {
+var useEditorTheme = (cm, { variant, showFoldGutter = true }) => {
 	const textQuaternary = "var(--text-quaternary)";
 	return useMemo(() => {
 		if (!cm) return null;
@@ -144,13 +147,14 @@ var useEditorTheme = (cm, { variant }) => {
 				padding: "1px 2px"
 			},
 			...variant === "plain" && { "& .cm-content": {
-				padding: "13px",
-				paddingLeft: "0px"
+				padding: showFoldGutter ? "13px" : `${SPACE_SCALE_PX[3]}px`,
+				...showFoldGutter && { paddingLeft: "0px" }
 			} }
 		});
 	}, [
 		cm,
 		variant,
+		showFoldGutter,
 		textQuaternary
 	]);
 };

package/dist/components/Code/Code.utils.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Code.utils.js","names":[],"sources":["../../../src/components/Code/Code.utils.tsx"],"sourcesContent":["import { useMemo } from 'react';\n\nimport * as YAML from 'yaml';\n\nimport type { TreeIndentContext } from '@codemirror/language';\nimport type { Extension, StateEffect } from '@codemirror/state';\nimport type { EditorView } from '@codemirror/view';\nimport type { SyntaxNode } from '@lezer/common';\n\nimport type { CMBundle } from '../../utils/lazy-codemirror-loader';\nimport type { CodeLanguageType } from './types';\n\nexport type { Extension, StateEffect };\n\ntype DataConverter = {\n parse: <T>(value: string) => T;\n stringify: <T>(value: T) => string;\n};\n\nconst passthroughConverter: DataConverter = {\n parse: (value) => value as never,\n stringify: (value) => String(value),\n};\n\nexport const DATA_CONVERTERS: Record<CodeLanguageType, DataConverter> = {\n json: {\n parse: (value) => JSON.parse(value),\n stringify: (value) => JSON.stringify(value, null, 2),\n },\n yaml: {\n parse: (value) => YAML.parse(value),\n stringify: (value) =>\n (YAML.stringify(value, { lineWidth: 0 }) as string \| undefined)?.slice(\n 0,\n -1\n ) ?? '',\n },\n javascript: passthroughConverter,\n typescript: passthroughConverter,\n python: passthroughConverter,\n shell: passthroughConverter,\n markdown: passthroughConverter,\n};\n\ntype SyntaxThemeOptions = {\n settings?: {\n background?: string;\n };\n};\n\nexport function getSyntaxTheme(\n cm: CMBundle,\n isDarkMode: boolean,\n options?: SyntaxThemeOptions\n) {\n return isDarkMode\n ? cm.tokyoNightStormInit({\n ...(options?.settings ? { settings: options.settings } : {}),\n styles: [{ tag: cm.lezerHighlightTags.content, color: '#9ece6a' }],\n })\n : cm.tokyoNightDayInit({\n ...(options?.settings ? { settings: options.settings } : {}),\n styles: [{ tag: cm.lezerHighlightTags.content, color: '#587539' }],\n });\n}\n\n// These helpers require the non-null bundle returned after CodeMirror loads.\n\nfunction buildYamlLanguage(cm: CMBundle) {\n const {\n LRLanguage,\n LanguageSupport,\n delimitedIndent,\n foldService,\n indentNodeProp,\n syntaxTree,\n syntaxTreeAvailable,\n lezerYamlParser,\n } = cm;\n\n const yamlParser = lezerYamlParser.configure({\n props: [\n indentNodeProp.add({\n Stream: (cx: TreeIndentContext) => {\n for (\n let before = cx.node.resolve(cx.pos, -1) as SyntaxNode \| null;\n before && before.to >= cx.pos;\n before = before.parent\n ) {\n if (before.name == 'BlockLiteralContent' && before.from < before.to)\n return cx.baseIndentFor(before);\n if (before.name == 'BlockLiteral')\n return cx.baseIndentFor(before) + cx.unit;\n if (before.name == 'BlockSequence' \|\| before.name == 'BlockMapping')\n return cx.column(before.from, 1);\n if (before.name == 'QuotedLiteral') return null;\n if (before.name == 'Literal') {\n const col = cx.column(before.from, 1);\n if (col == cx.lineIndent(before.from, 1)) return col;\n if (before.to > cx.pos) return null;\n }\n }\n return null;\n },\n FlowMapping: delimitedIndent({ closing: '}' }),\n FlowSequence: delimitedIndent({ closing: ']' }),\n }),\n ],\n });\n\n const yamlLanguage = LRLanguage.define({\n name: 'yaml',\n parser: yamlParser,\n languageData: {\n commentTokens: { line: '#' },\n indentOnInput: /^\\s*[\\]}]$/,\n },\n });\n\n const language = new LanguageSupport(yamlLanguage);\n const extensions: Extension[] = [\n foldService.of((state, from, to) => {\n void from;\n const tree = syntaxTreeAvailable(state)\n ? syntaxTree(state)\n : yamlParser.parse(state.doc.toString());\n if (tree.length < to) return null;\n\n const end = tree.resolveInner(to, 1);\n if (end.node.type.name === 'Pair') {\n return { from: to, to: end.node.to };\n }\n\n return null;\n }),\n ];\n\n return { language, extensions };\n}\n\nexport function getLanguageExtension(\n cm: CMBundle,\n language: CodeLanguageType\n): { language: Extension; extensions?: Extension[] } {\n const {\n langJson,\n langJavascript,\n langPython,\n langMarkdown,\n StreamLanguage,\n legacyModeShell,\n } = cm;\n\n if (language === 'yaml') return buildYamlLanguage(cm);\n if (language === 'json') return { language: langJson() };\n if (language === 'javascript') return { language: langJavascript() };\n if (language === 'typescript')\n return { language: langJavascript({ typescript: true }) };\n if (language === 'python') return { language: langPython() };\n if (language === 'shell')\n return { language: StreamLanguage.define(legacyModeShell) };\n return { language: langMarkdown() };\n}\n\nexport const foldAllExceptRoot = (cm: CMBundle) => (view: EditorView) => {\n const { foldEffect, foldable } = cm;\n const { state } = view;\n const effects: Array<StateEffect<unknown>> = [];\n for (let pos = 0; pos < state.doc.length; ) {\n const line = view.lineBlockAt(pos);\n let range = foldable(state, line.from, line.to);\n\n // avoid root node\n if (range && range.from + range.to === state.doc.length) {\n range = null;\n }\n\n if (range) effects.push(foldEffect.of(range));\n pos = (range ? view.lineBlockAt(range.to) : line).to + 1;\n }\n if (effects.length) {\n view.dispatch({ effects });\n }\n return !!effects.length;\n};\n\nexport const useEditorTheme = (\n cm: CMBundle \| null,\n {\n variant,\n }: {\n variant?: 'plain' \| 'full';\n }\n) => {\n const textQuaternary = 'var(--text-quaternary)';\n\n return useMemo(() => {\n if (!cm) return null;\n\n return cm.EditorView.theme({\n '&.cm-editor': {\n backgroundColor: 'transparent',\n },\n '&.cm-focused': {\n outline: 'none',\n },\n green: {\n background: 'green',\n },\n '& .cm-content': {\n padding: '12px',\n },\n '& .cm-line': {\n fontFamily: \"'Fira Code', monospace\",\n padding: 0,\n overflowAnchor: 'none',\n fontVariantLigatures: 'none',\n },\n '& .cm-gutters.cm-gutters': {\n backgroundColor: 'transparent',\n color: textQuaternary,\n borderRight: 'none',\n },\n '& .cm-lineNumbers': {\n minWidth: '32px',\n },\n '& .cm-lineNumbers .cm-gutterElement': {\n minWidth: '32px',\n padding: '0 4px 0 8px',\n },\n '& .cm-foldGutter': {\n width: '20px',\n },\n '& .cm-foldGutter .cm-gutterElement': {\n padding: '0 2px',\n textAlign: 'center',\n },\n '& .cm-foldGutter span': {\n color: textQuaternary,\n fontSize: '16px',\n lineHeight: '16px',\n },\n '& .cm-foldPlaceholder': {\n backgroundColor: 'var(--bg-surface-level-2)',\n border: '1px solid var(--border-subtle)',\n borderRadius: 'var(--radius-xs)',\n color: textQuaternary,\n lineHeight: '1',\n padding: '1px 2px',\n },\n ...(variant === 'plain' && {\n '& .cm-content': {\n padding: '13px',\n paddingLeft: '0px',\n },\n }),\n });\n }, [cm, variant, textQuaternary]);\n};\n"],"mappings":"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"}
1	+ {"version":3,"file":"Code.utils.js","names":[],"sources":["../../../src/components/Code/Code.utils.tsx"],"sourcesContent":["import { useMemo } from 'react';\n\nimport * as YAML from 'yaml';\n\nimport type { TreeIndentContext } from '@codemirror/language';\nimport type { Extension, StateEffect } from '@codemirror/state';\nimport type { EditorView } from '@codemirror/view';\nimport type { SyntaxNode } from '@lezer/common';\n\nimport type { CMBundle } from '../../utils/lazy-codemirror-loader';\nimport { SPACE_SCALE_PX } from '../../utils/spacing';\nimport type { CodeLanguageType } from './types';\n\nexport type { Extension, StateEffect };\n\ntype DataConverter = {\n parse: <T>(value: string) => T;\n stringify: <T>(value: T) => string;\n};\n\nconst passthroughConverter: DataConverter = {\n parse: (value) => value as never,\n stringify: (value) => String(value),\n};\n\nexport const DATA_CONVERTERS: Record<CodeLanguageType, DataConverter> = {\n plaintext: passthroughConverter,\n json: {\n parse: (value) => JSON.parse(value),\n stringify: (value) => JSON.stringify(value, null, 2),\n },\n yaml: {\n parse: (value) => YAML.parse(value),\n stringify: (value) =>\n (YAML.stringify(value, { lineWidth: 0 }) as string \| undefined)?.slice(\n 0,\n -1\n ) ?? '',\n },\n javascript: passthroughConverter,\n typescript: passthroughConverter,\n python: passthroughConverter,\n shell: passthroughConverter,\n markdown: passthroughConverter,\n};\n\ntype SyntaxThemeOptions = {\n settings?: {\n background?: string;\n };\n};\n\nexport function getSyntaxTheme(\n cm: CMBundle,\n isDarkMode: boolean,\n options?: SyntaxThemeOptions\n) {\n return isDarkMode\n ? cm.tokyoNightStormInit({\n ...(options?.settings ? { settings: options.settings } : {}),\n styles: [{ tag: cm.lezerHighlightTags.content, color: '#9ece6a' }],\n })\n : cm.tokyoNightDayInit({\n ...(options?.settings ? { settings: options.settings } : {}),\n styles: [{ tag: cm.lezerHighlightTags.content, color: '#587539' }],\n });\n}\n\n// These helpers require the non-null bundle returned after CodeMirror loads.\n\nfunction buildYamlLanguage(cm: CMBundle) {\n const {\n LRLanguage,\n LanguageSupport,\n delimitedIndent,\n foldService,\n indentNodeProp,\n syntaxTree,\n syntaxTreeAvailable,\n lezerYamlParser,\n } = cm;\n\n const yamlParser = lezerYamlParser.configure({\n props: [\n indentNodeProp.add({\n Stream: (cx: TreeIndentContext) => {\n for (\n let before = cx.node.resolve(cx.pos, -1) as SyntaxNode \| null;\n before && before.to >= cx.pos;\n before = before.parent\n ) {\n if (before.name == 'BlockLiteralContent' && before.from < before.to)\n return cx.baseIndentFor(before);\n if (before.name == 'BlockLiteral')\n return cx.baseIndentFor(before) + cx.unit;\n if (before.name == 'BlockSequence' \|\| before.name == 'BlockMapping')\n return cx.column(before.from, 1);\n if (before.name == 'QuotedLiteral') return null;\n if (before.name == 'Literal') {\n const col = cx.column(before.from, 1);\n if (col == cx.lineIndent(before.from, 1)) return col;\n if (before.to > cx.pos) return null;\n }\n }\n return null;\n },\n FlowMapping: delimitedIndent({ closing: '}' }),\n FlowSequence: delimitedIndent({ closing: ']' }),\n }),\n ],\n });\n\n const yamlLanguage = LRLanguage.define({\n name: 'yaml',\n parser: yamlParser,\n languageData: {\n commentTokens: { line: '#' },\n indentOnInput: /^\\s*[\\]}]$/,\n },\n });\n\n const language = new LanguageSupport(yamlLanguage);\n const extensions: Extension[] = [\n foldService.of((state, from, to) => {\n void from;\n const tree = syntaxTreeAvailable(state)\n ? syntaxTree(state)\n : yamlParser.parse(state.doc.toString());\n if (tree.length < to) return null;\n\n const end = tree.resolveInner(to, 1);\n if (end.node.type.name === 'Pair') {\n return { from: to, to: end.node.to };\n }\n\n return null;\n }),\n ];\n\n return { language, extensions };\n}\n\nexport function getLanguageExtension(\n cm: CMBundle,\n language: CodeLanguageType\n): { language: Extension; extensions?: Extension[] } {\n const {\n langJson,\n langJavascript,\n langPython,\n langMarkdown,\n StreamLanguage,\n legacyModeShell,\n } = cm;\n\n if (language === 'plaintext') return { language: [] };\n if (language === 'yaml') return buildYamlLanguage(cm);\n if (language === 'json') return { language: langJson() };\n if (language === 'javascript') return { language: langJavascript() };\n if (language === 'typescript')\n return { language: langJavascript({ typescript: true }) };\n if (language === 'python') return { language: langPython() };\n if (language === 'shell')\n return { language: StreamLanguage.define(legacyModeShell) };\n return { language: langMarkdown() };\n}\n\nexport const foldAllExceptRoot = (cm: CMBundle) => (view: EditorView) => {\n const { foldEffect, foldable } = cm;\n const { state } = view;\n const effects: Array<StateEffect<unknown>> = [];\n for (let pos = 0; pos < state.doc.length; ) {\n const line = view.lineBlockAt(pos);\n let range = foldable(state, line.from, line.to);\n\n // avoid root node\n if (range && range.from + range.to === state.doc.length) {\n range = null;\n }\n\n if (range) effects.push(foldEffect.of(range));\n pos = (range ? view.lineBlockAt(range.to) : line).to + 1;\n }\n if (effects.length) {\n view.dispatch({ effects });\n }\n return !!effects.length;\n};\n\nexport const useEditorTheme = (\n cm: CMBundle \| null,\n {\n variant,\n showFoldGutter = true,\n }: {\n variant?: 'plain' \| 'full';\n showFoldGutter?: boolean;\n }\n) => {\n const textQuaternary = 'var(--text-quaternary)';\n\n return useMemo(() => {\n if (!cm) return null;\n\n return cm.EditorView.theme({\n '&.cm-editor': {\n backgroundColor: 'transparent',\n },\n '&.cm-focused': {\n outline: 'none',\n },\n green: {\n background: 'green',\n },\n '& .cm-content': {\n padding: '12px',\n },\n '& .cm-line': {\n fontFamily: \"'Fira Code', monospace\",\n padding: 0,\n overflowAnchor: 'none',\n fontVariantLigatures: 'none',\n },\n '& .cm-gutters.cm-gutters': {\n backgroundColor: 'transparent',\n color: textQuaternary,\n borderRight: 'none',\n },\n '& .cm-lineNumbers': {\n minWidth: '32px',\n },\n '& .cm-lineNumbers .cm-gutterElement': {\n minWidth: '32px',\n padding: '0 4px 0 8px',\n },\n '& .cm-foldGutter': {\n width: '20px',\n },\n '& .cm-foldGutter .cm-gutterElement': {\n padding: '0 2px',\n textAlign: 'center',\n },\n '& .cm-foldGutter span': {\n color: textQuaternary,\n fontSize: '16px',\n lineHeight: '16px',\n },\n '& .cm-foldPlaceholder': {\n backgroundColor: 'var(--bg-surface-level-2)',\n border: '1px solid var(--border-subtle)',\n borderRadius: 'var(--radius-xs)',\n color: textQuaternary,\n lineHeight: '1',\n padding: '1px 2px',\n },\n ...(variant === 'plain' && {\n '& .cm-content': {\n padding: showFoldGutter ? '13px' : `${SPACE_SCALE_PX[3]}px`,\n ...(showFoldGutter && { paddingLeft: '0px' }),\n },\n }),\n });\n }, [cm, variant, showFoldGutter, textQuaternary]);\n};\n"],"mappings":"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"}

package/dist/components/Code/CodeLanguageSelect.d.ts ADDED Viewed

@@ -0,0 +1,7 @@
+import type { SelectProps } from '../Select/index.js';
+import type { CodeLanguageType } from './types.js';
+export interface CodeLanguageSelectProps extends Pick<SelectProps, 'disabled' | 'size' | 'aria-label' | 'triggerClassName'> {
+    value: string;
+    onChange: (value: CodeLanguageType) => void;
+}
+export declare function CodeLanguageSelect({ value, onChange, disabled, size, 'aria-label': ariaLabel, triggerClassName, }: CodeLanguageSelectProps): import("react").JSX.Element;

package/dist/components/Code/CodeLanguageSelect.js ADDED Viewed

@@ -0,0 +1,29 @@
+import { cn } from "../../utils/cn.js";
+import { Select } from "../Select/Select.js";
+import { CODE_LANGUAGES, resolveCodeLanguage } from "./codeLanguages.js";
+import { jsx } from "react/jsx-runtime";
+//#region packages/components/src/components/Code/CodeLanguageSelect.tsx
+function CodeLanguageSelect({ value, onChange, disabled, size = "sm", "aria-label": ariaLabel = "Code language", triggerClassName }) {
+	const language = resolveCodeLanguage(value);
+	const options = language ? CODE_LANGUAGES : [...CODE_LANGUAGES, {
+		value,
+		label: value
+	}];
+	return /* @__PURE__ */ jsx(Select, {
+		"aria-label": ariaLabel,
+		value: language ?? value,
+		options,
+		onChange: (next) => {
+			const resolved = next === void 0 ? void 0 : resolveCodeLanguage(next);
+			if (resolved !== void 0) onChange(resolved);
+		},
+		disabled,
+		size,
+		align: "end",
+		triggerClassName: cn("w-auto max-w-[min(10rem,100%)] border-0 bg-transparent shadow-none", triggerClassName)
+	});
+}
+//#endregion
+export { CodeLanguageSelect };
+//# sourceMappingURL=CodeLanguageSelect.js.map

package/dist/components/Code/CodeLanguageSelect.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"CodeLanguageSelect.js","names":[],"sources":["../../../src/components/Code/CodeLanguageSelect.tsx"],"sourcesContent":["import { cn } from '../../utils/cn';\nimport { Select } from '../Select';\nimport type { SelectProps } from '../Select';\nimport { CODE_LANGUAGES, resolveCodeLanguage } from './codeLanguages';\nimport type { CodeLanguageType } from './types';\n\nexport interface CodeLanguageSelectProps extends Pick<\n SelectProps,\n 'disabled' | 'size' | 'aria-label' | 'triggerClassName'\n> {\n value: string;\n onChange: (value: CodeLanguageType) => void;\n}\n\nexport function CodeLanguageSelect({\n value,\n onChange,\n disabled,\n size = 'sm',\n 'aria-label': ariaLabel = 'Code language',\n triggerClassName,\n}: CodeLanguageSelectProps) {\n const language = resolveCodeLanguage(value);\n // Retain labels from existing Markdown even when no grammar is available.\n const options = language\n ? CODE_LANGUAGES\n : [...CODE_LANGUAGES, { value, label: value }];\n\n return (\n <Select\n aria-label={ariaLabel}\n value={language ?? value}\n options={options}\n onChange={(next) => {\n const resolved =\n next === undefined ? undefined : resolveCodeLanguage(next);\n if (resolved !== undefined) onChange(resolved);\n }}\n disabled={disabled}\n size={size}\n align=\"end\"\n triggerClassName={cn(\n 'w-auto max-w-[min(10rem,100%)] border-0 bg-transparent shadow-none',\n triggerClassName\n )}\n />\n );\n}\n"],"mappings":";;;;;AAcA,SAAgB,mBAAmB,EACjC,OACA,UACA,UACA,OAAO,MACP,cAAc,YAAY,iBAC1B,oBAC0B;CAC1B,MAAM,WAAW,oBAAoB,KAAK;CAE1C,MAAM,UAAU,WACZ,iBACA,CAAC,GAAG,gBAAgB;EAAE;EAAO,OAAO;CAAM,CAAC;CAE/C,OACE,oBAAC,QAAD;EACE,cAAY;EACZ,OAAO,YAAY;EACV;EACT,WAAW,SAAS;GAClB,MAAM,WACJ,SAAS,KAAA,IAAY,KAAA,IAAY,oBAAoB,IAAI;GAC3D,IAAI,aAAa,KAAA,GAAW,SAAS,QAAQ;EAC/C;EACU;EACJ;EACN,OAAM;EACN,kBAAkB,GAChB,sEACA,gBACF;CACD,CAAA;AAEL"}

package/dist/components/Code/CodeLite.js CHANGED Viewed

@@ -73,6 +73,7 @@ var CodeLite = memo((props) => {
 		});
 	};
 	const itemContent = (_index, line) => /* @__PURE__ */ jsxs(Fragment$1, { children: [showGutter && /* @__PURE__ */ jsx("td", {
+		"data-search-ignore": "",
 		className: "select-none py-0 align-top",
 		children: /* @__PURE__ */ jsxs("div", {
 			className: "flex items-center justify-between gap-space-1 whitespace-pre font-mono text-quaternary",
@@ -92,6 +93,7 @@ var CodeLite = memo((props) => {
 			}) : /* @__PURE__ */ jsx("span", { className: "size-4" })]
 		})
 	}), /* @__PURE__ */ jsxs("td", {
+		"data-code-line": "",
 		className: cn("px-1.5 py-0 font-mono", wrapLines ? "whitespace-pre-wrap" : "whitespace-pre"),
 		children: [
 			line.line.map((token, index) => {
@@ -128,6 +130,7 @@ var CodeLite = memo((props) => {
 	})] });
 	const className = cn("font-mono text-xs", props.className);
 	if (!props.virtualize) return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("table", {
+		"data-code-lite": "",
 		className: cn("w-fit border-spacing-0 [overflow-anchor:none]", className),
 		children: /* @__PURE__ */ jsx("tbody", { children: visibleLines.map((line, index) => /* @__PURE__ */ jsx("tr", {
 			className: "[overflow-anchor:none]",

package/dist/components/Code/CodeLite.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CodeLite.js","names":[],"sources":["../../../src/components/Code/CodeLite.tsx"],"sourcesContent":["import { type ReactNode, memo, useEffect, useRef, useState } from 'react';\n\nimport { TableVirtuoso } from 'react-virtuoso';\n\nimport { CaretDownIcon } from '../../icons/PaddedPhosphorIcons';\nimport { cn } from '../../utils/cn';\nimport { useCodeMirror } from '../../utils/useCodeMirror';\nimport {\n type ParsedFile,\n convertFile,\n getVisibleLines,\n parseFile,\n} from './CodeLite.utils';\nimport type { LANGUAGES } from './languages/languages';\n\nexport interface CodeLiteProps {\n value: string \| undefined;\n language: keyof typeof LANGUAGES;\n virtualize?: boolean;\n className?: string;\n children?: ReactNode;\n showGutter?: boolean;\n wrapLines?: boolean;\n highlightText?: string;\n}\n\n/*\n The preferred component for read-only syntax-highlighted code. It avoids\n * mounting a full CodeMirror editor, making it more performant when rendering\n * multiple code blocks, while retaining folding and optional virtualization.\n * Use `Code` only when editing or custom CodeMirror extensions are required.\n */\nexport const CodeLite = memo((props: CodeLiteProps) => {\n const cm = useCodeMirror();\n const reqCount = useRef(0);\n const [parse, setParse] = useState<{\n id: number;\n data: Awaited<ReturnType<typeof parseFile>> \| null;\n error: unknown \| null;\n }>({ id: -1, data: null, error: null });\n\n const mountedRef = useRef(true);\n useEffect(() => () => void (mountedRef.current = false), []);\n\n useEffect(() => {\n if (!cm) return;\n\n const controller = new AbortController();\n const signal = controller.signal;\n const requestId = ++reqCount.current;\n\n setParse({ id: requestId, data: null, error: null });\n\n parseFile(cm, props.language, props.value, { signal }).then(\n (data) => {\n if (!mountedRef.current) return;\n setParse((prev) => {\n if (prev.id !== requestId) return prev;\n return { id: requestId, data, error: null };\n });\n },\n (error) => {\n if (!mountedRef.current) return;\n setParse((prev) => {\n if (prev.id !== requestId) return prev;\n return { id: requestId, data: null, error };\n });\n }\n );\n\n return () => controller.abort();\n }, [cm, props.language, props.value]);\n\n const data = parse.data ?? convertFile(props.value);\n\n const [foldIdx, setFoldIdx] = useState<Set<number>>(new Set());\n\n const visibleLines = getVisibleLines(data, foldIdx);\n const showGutter = props.showGutter ?? true;\n const wrapLines = props.wrapLines ?? true;\n\n const toggleFold = (n: number) => {\n setFoldIdx((prev) => {\n const curr = new Set(prev);\n if (curr.has(n)) curr.delete(n);\n else curr.add(n);\n return curr;\n });\n };\n\n const itemContent = (_index: number, line: ParsedFile['file'][number]) => (\n <>\n {showGutter && (\n <td className=\"select-none py-0 align-top\">\n <div className=\"flex items-center justify-between gap-space-1 whitespace-pre font-mono text-quaternary\">\n <span className=\"min-w-8 pl-2.5 text-right\">{line.n}</span>\n\n {line.fold ? (\n <button\n type=\"button\"\n aria-expanded={!foldIdx.has(line.n)}\n onClick={() => toggleFold(line.n)}\n className=\"-rotate-90 transition-transform aria-expanded:rotate-0\"\n >\n <CaretDownIcon aria-hidden size={16} weight=\"regular\" />\n </button>\n ) : (\n <span className=\"size-4\" />\n )}\n </div>\n </td>\n )}\n\n <td\n className={cn(\n 'px-1.5 py-0 font-mono',\n wrapLines ? 'whitespace-pre-wrap' : 'whitespace-pre'\n )}\n >\n {line.line.map((token, index) => {\n const tokenText = data.code.slice(token.from, token.to);\n const highlightText = props.highlightText;\n const highlightIndex = highlightText\n ? tokenText.indexOf(highlightText)\n : -1;\n\n return (\n <span key={index} className={cn(token.classes \|\| 'text-tertiary')}>\n {highlightIndex === -1 \|\| !highlightText ? (\n tokenText\n ) : (\n <>\n {tokenText.slice(0, highlightIndex)}\n <span\n data-code-highlight\n className=\"rounded-xs bg-brand-subtle text-brand-primary\"\n >\n {highlightText}\n </span>\n {tokenText.slice(highlightIndex + highlightText.length)}\n </>\n )}\n </span>\n );\n })}\n\n {line.line.length === 0 && (\n <span className=\"text-tertiary\">{'\\n'}</span>\n )}\n\n {foldIdx.has(line.n) && (\n <button\n type=\"button\"\n className=\"rounded-xs border border-subtle bg-surface-level-2 py-px text-xs leading-none text-quaternary transition-colors hover:bg-surface-level-2-hover\"\n onClick={() => toggleFold(line.n)}\n >\n <span className=\"-mx-0.5\">...</span>\n </button>\n )}\n </td>\n </>\n );\n\n const className = cn('font-mono text-xs', props.className);\n\n if (!props.virtualize) {\n return (\n <>\n <table\n className={cn(\n 'w-fit border-spacing-0 [overflow-anchor:none]',\n className\n )}\n >\n <tbody>\n {visibleLines.map((line, index) => (\n <tr key={index} className=\"[overflow-anchor:none]\">\n {itemContent(index, line)}\n </tr>\n ))}\n </tbody>\n </table>\n {props.children}\n </>\n );\n }\n\n return (\n <>\n <TableVirtuoso\n data={visibleLines}\n className={className}\n itemContent={itemContent}\n />\n {props.children}\n </>\n );\n});\n"],"mappings":";;;;;;;;;;;;;;AAgCA,IAAa,WAAW,MAAM,UAAyB;CACrD,MAAM,KAAK,cAAc;CACzB,MAAM,WAAW,OAAO,CAAC;CACzB,MAAM,CAAC,OAAO,YAAY,SAIvB;EAAE,IAAI;EAAI,MAAM;EAAM,OAAO;CAAK,CAAC;CAEtC,MAAM,aAAa,OAAO,IAAI;CAC9B,sBAAsB,MAAM,WAAW,UAAU,QAAQ,CAAC,CAAC;CAE3D,gBAAgB;EACd,IAAI,CAAC,IAAI;EAET,MAAM,aAAa,IAAI,gBAAgB;EACvC,MAAM,SAAS,WAAW;EAC1B,MAAM,YAAY,EAAE,SAAS;EAE7B,SAAS;GAAE,IAAI;GAAW,MAAM;GAAM,OAAO;EAAK,CAAC;EAEnD,UAAU,IAAI,MAAM,UAAU,MAAM,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,MACpD,SAAS;GACR,IAAI,CAAC,WAAW,SAAS;GACzB,UAAU,SAAS;IACjB,IAAI,KAAK,OAAO,WAAW,OAAO;IAClC,OAAO;KAAE,IAAI;KAAW;KAAM,OAAO;IAAK;GAC5C,CAAC;EACH,IACC,UAAU;GACT,IAAI,CAAC,WAAW,SAAS;GACzB,UAAU,SAAS;IACjB,IAAI,KAAK,OAAO,WAAW,OAAO;IAClC,OAAO;KAAE,IAAI;KAAW,MAAM;KAAM;IAAM;GAC5C,CAAC;EACH,CACF;EAEA,aAAa,WAAW,MAAM;CAChC,GAAG;EAAC;EAAI,MAAM;EAAU,MAAM;CAAK,CAAC;CAEpC,MAAM,OAAO,MAAM,QAAQ,YAAY,MAAM,KAAK;CAElD,MAAM,CAAC,SAAS,cAAc,yBAAsB,IAAI,IAAI,CAAC;CAE7D,MAAM,eAAe,gBAAgB,MAAM,OAAO;CAClD,MAAM,aAAa,MAAM,cAAc;CACvC,MAAM,YAAY,MAAM,aAAa;CAErC,MAAM,cAAc,MAAc;EAChC,YAAY,SAAS;GACnB,MAAM,OAAO,IAAI,IAAI,IAAI;GACzB,IAAI,KAAK,IAAI,CAAC,GAAG,KAAK,OAAO,CAAC;QACzB,KAAK,IAAI,CAAC;GACf,OAAO;EACT,CAAC;CACH;CAEA,MAAM,eAAe,QAAgB,SACnC,qBAAA,YAAA,EAAA,UAAA,CACG,cACC,oBAAC,MAAD;EAAI,WAAU;~~EACZ~~,UAAA,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,oBAAC,QAAD;IAAM,WAAU;IAA6B,UAAA,KAAK;GAAQ,CAAA,GAEzD,KAAK,OACJ,oBAAC,UAAD;IACE,MAAK;IACL,iBAAe,CAAC,QAAQ,IAAI,KAAK,CAAC;IAClC,eAAe,WAAW,KAAK,CAAC;IAChC,WAAU;IAEV,UAAA,oBAAC,eAAD;KAAe,eAAA;KAAY,MAAM;KAAI,QAAO;IAAW,CAAA;GACjD,CAAA,IAER,oBAAC,QAAD,EAAM,WAAU,SAAU,CAAA,CAEzB;;CACH,CAAA,GAGN,qBAAC,MAAD;EACE,WAAW,GACT,yBACA,YAAY,wBAAwB,gBACtC;~~EAJF~~,UAAA;~~GAMG~~,KAAK,KAAK,KAAK,OAAO,UAAU;IAC/B,MAAM,YAAY,KAAK,KAAK,MAAM,MAAM,MAAM,MAAM,EAAE;IACtD,MAAM,gBAAgB,MAAM;IAC5B,MAAM,iBAAiB,gBACnB,UAAU,QAAQ,aAAa,IAC/B;IAEJ,OACE,oBAAC,QAAD;KAAkB,WAAW,GAAG,MAAM,WAAW,eAAe;KAC7D,UAAA,mBAAmB,MAAM,CAAC,gBACzB,YAEA,qBAAA,YAAA,EAAA,UAAA;MACG,UAAU,MAAM,GAAG,cAAc;MAClC,oBAAC,QAAD;OACE,uBAAA;OACA,WAAU;OAET,UAAA;MACG,CAAA;MACL,UAAU,MAAM,iBAAiB,cAAc,MAAM;KACtD,EAAA,CAAA;IAEA,GAfK,KAeL;GAEV,CAAC;GAEA,KAAK,KAAK,WAAW,KACpB,oBAAC,QAAD;IAAM,WAAU;IAAiB,UAAA;GAAW,CAAA;GAG7C,QAAQ,IAAI,KAAK,CAAC,KACjB,oBAAC,UAAD;IACE,MAAK;IACL,WAAU;IACV,eAAe,WAAW,KAAK,CAAC;IAEhC,UAAA,oBAAC,QAAD;KAAM,WAAU;KAAU,UAAA;IAAS,CAAA;GAC7B,CAAA;EAER;CACJ,CAAA,CAAA,EAAA,CAAA;CAGJ,MAAM,YAAY,GAAG,qBAAqB,MAAM,SAAS;CAEzD,IAAI,CAAC,MAAM,YACT,OACE,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,SAAD;EACE,WAAW,GACT,iDACA,SACF;EAEA,UAAA,oBAAC,SAAD,EAAA,UACG,aAAa,KAAK,MAAM,UACvB,oBAAC,MAAD;GAAgB,WAAU;GACvB,UAAA,YAAY,OAAO,IAAI;EACtB,GAFK,KAEL,CACL,EACI,CAAA;CACF,CAAA,GACN,MAAM,QACP,EAAA,CAAA;CAIN,OACE,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,eAAD;EACE,MAAM;EACK;EACE;CACd,CAAA,GACA,MAAM,QACP,EAAA,CAAA;AAEN,CAAC"}
1	+ {"version":3,"file":"CodeLite.js","names":[],"sources":["../../../src/components/Code/CodeLite.tsx"],"sourcesContent":["import { type ReactNode, memo, useEffect, useRef, useState } from 'react';\n\nimport { TableVirtuoso } from 'react-virtuoso';\n\nimport { CaretDownIcon } from '../../icons/PaddedPhosphorIcons';\nimport { cn } from '../../utils/cn';\nimport { useCodeMirror } from '../../utils/useCodeMirror';\nimport {\n type ParsedFile,\n convertFile,\n getVisibleLines,\n parseFile,\n} from './CodeLite.utils';\nimport type { LANGUAGES } from './languages/languages';\n\nexport interface CodeLiteProps {\n value: string \| undefined;\n language: keyof typeof LANGUAGES;\n virtualize?: boolean;\n className?: string;\n children?: ReactNode;\n showGutter?: boolean;\n wrapLines?: boolean;\n highlightText?: string;\n}\n\n/*\n The preferred component for read-only syntax-highlighted code. It avoids\n * mounting a full CodeMirror editor, making it more performant when rendering\n * multiple code blocks, while retaining folding and optional virtualization.\n * Use `Code` only when editing or custom CodeMirror extensions are required.\n */\nexport const CodeLite = memo((props: CodeLiteProps) => {\n const cm = useCodeMirror();\n const reqCount = useRef(0);\n const [parse, setParse] = useState<{\n id: number;\n data: Awaited<ReturnType<typeof parseFile>> \| null;\n error: unknown \| null;\n }>({ id: -1, data: null, error: null });\n\n const mountedRef = useRef(true);\n useEffect(() => () => void (mountedRef.current = false), []);\n\n useEffect(() => {\n if (!cm) return;\n\n const controller = new AbortController();\n const signal = controller.signal;\n const requestId = ++reqCount.current;\n\n setParse({ id: requestId, data: null, error: null });\n\n parseFile(cm, props.language, props.value, { signal }).then(\n (data) => {\n if (!mountedRef.current) return;\n setParse((prev) => {\n if (prev.id !== requestId) return prev;\n return { id: requestId, data, error: null };\n });\n },\n (error) => {\n if (!mountedRef.current) return;\n setParse((prev) => {\n if (prev.id !== requestId) return prev;\n return { id: requestId, data: null, error };\n });\n }\n );\n\n return () => controller.abort();\n }, [cm, props.language, props.value]);\n\n const data = parse.data ?? convertFile(props.value);\n\n const [foldIdx, setFoldIdx] = useState<Set<number>>(new Set());\n\n const visibleLines = getVisibleLines(data, foldIdx);\n const showGutter = props.showGutter ?? true;\n const wrapLines = props.wrapLines ?? true;\n\n const toggleFold = (n: number) => {\n setFoldIdx((prev) => {\n const curr = new Set(prev);\n if (curr.has(n)) curr.delete(n);\n else curr.add(n);\n return curr;\n });\n };\n\n const itemContent = (_index: number, line: ParsedFile['file'][number]) => (\n <>\n {showGutter && (\n <td data-search-ignore=\"\" className=\"select-none py-0 align-top\">\n <div className=\"flex items-center justify-between gap-space-1 whitespace-pre font-mono text-quaternary\">\n <span className=\"min-w-8 pl-2.5 text-right\">{line.n}</span>\n\n {line.fold ? (\n <button\n type=\"button\"\n aria-expanded={!foldIdx.has(line.n)}\n onClick={() => toggleFold(line.n)}\n className=\"-rotate-90 transition-transform aria-expanded:rotate-0\"\n >\n <CaretDownIcon aria-hidden size={16} weight=\"regular\" />\n </button>\n ) : (\n <span className=\"size-4\" />\n )}\n </div>\n </td>\n )}\n\n <td\n data-code-line=\"\"\n className={cn(\n 'px-1.5 py-0 font-mono',\n wrapLines ? 'whitespace-pre-wrap' : 'whitespace-pre'\n )}\n >\n {line.line.map((token, index) => {\n const tokenText = data.code.slice(token.from, token.to);\n const highlightText = props.highlightText;\n const highlightIndex = highlightText\n ? tokenText.indexOf(highlightText)\n : -1;\n\n return (\n <span key={index} className={cn(token.classes \|\| 'text-tertiary')}>\n {highlightIndex === -1 \|\| !highlightText ? (\n tokenText\n ) : (\n <>\n {tokenText.slice(0, highlightIndex)}\n <span\n data-code-highlight\n className=\"rounded-xs bg-brand-subtle text-brand-primary\"\n >\n {highlightText}\n </span>\n {tokenText.slice(highlightIndex + highlightText.length)}\n </>\n )}\n </span>\n );\n })}\n\n {line.line.length === 0 && (\n <span className=\"text-tertiary\">{'\\n'}</span>\n )}\n\n {foldIdx.has(line.n) && (\n <button\n type=\"button\"\n className=\"rounded-xs border border-subtle bg-surface-level-2 py-px text-xs leading-none text-quaternary transition-colors hover:bg-surface-level-2-hover\"\n onClick={() => toggleFold(line.n)}\n >\n <span className=\"-mx-0.5\">...</span>\n </button>\n )}\n </td>\n </>\n );\n\n const className = cn('font-mono text-xs', props.className);\n\n if (!props.virtualize) {\n return (\n <>\n <table\n data-code-lite=\"\"\n className={cn(\n 'w-fit border-spacing-0 [overflow-anchor:none]',\n className\n )}\n >\n <tbody>\n {visibleLines.map((line, index) => (\n <tr key={index} className=\"[overflow-anchor:none]\">\n {itemContent(index, line)}\n </tr>\n ))}\n </tbody>\n </table>\n {props.children}\n </>\n );\n }\n\n return (\n <>\n <TableVirtuoso\n data={visibleLines}\n className={className}\n itemContent={itemContent}\n />\n {props.children}\n </>\n );\n});\n"],"mappings":"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"}

package/dist/components/Code/CodeToolbar.d.ts ADDED Viewed

@@ -0,0 +1,7 @@
+import type { ReactNode } from 'react';
+export interface CodeToolbarProps {
+    language?: ReactNode;
+    children?: ReactNode;
+    className?: string;
+}
+export declare function CodeToolbar({ language, children, className, }: CodeToolbarProps): import("react").JSX.Element;

package/dist/components/Code/CodeToolbar.js ADDED Viewed

@@ -0,0 +1,19 @@
+import { cn } from "../../utils/cn.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/components/src/components/Code/CodeToolbar.tsx
+function CodeToolbar({ language, children, className }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex min-w-0 items-center justify-end border-b border-subtle px-space-2 py-space-1", className),
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "min-w-0",
+			children: language
+		}), children && /* @__PURE__ */ jsx("div", {
+			className: "flex shrink-0 items-center gap-space-1",
+			children
+		})]
+	});
+}
+//#endregion
+export { CodeToolbar };
+//# sourceMappingURL=CodeToolbar.js.map

package/dist/components/Code/CodeToolbar.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"CodeToolbar.js","names":[],"sources":["../../../src/components/Code/CodeToolbar.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { cn } from '../../utils/cn';\n\nexport interface CodeToolbarProps {\n language?: ReactNode;\n children?: ReactNode;\n className?: string;\n}\n\nexport function CodeToolbar({\n language,\n children,\n className,\n}: CodeToolbarProps) {\n return (\n <div\n className={cn(\n 'flex min-w-0 items-center justify-end border-b border-subtle px-space-2 py-space-1',\n className\n )}\n >\n <div className=\"min-w-0\">{language}</div>\n {children && (\n <div className=\"flex shrink-0 items-center gap-space-1\">{children}</div>\n )}\n </div>\n );\n}\n"],"mappings":";;;AAUA,SAAgB,YAAY,EAC1B,UACA,UACA,aACmB;CACnB,OACE,qBAAC,OAAD;EACE,WAAW,GACT,sFACA,SACF;EAJF,UAAA,CAME,oBAAC,OAAD;GAAK,WAAU;GAAW,UAAA;EAAc,CAAA,GACvC,YACC,oBAAC,OAAD;GAAK,WAAU;GAA0C;EAAc,CAAA,CAEtE;;AAET"}

package/dist/components/Code/codeLanguages.d.ts ADDED Viewed

@@ -0,0 +1,7 @@
+import type { CodeLanguageType } from './types.js';
+export declare const CODE_LANGUAGES: {
+    value: CodeLanguageType;
+    label: string;
+    aliases: string[];
+}[];
+export declare function resolveCodeLanguage(value: string): CodeLanguageType | undefined;

package/dist/components/Code/codeLanguages.js ADDED Viewed

@@ -0,0 +1,59 @@
+//#region packages/components/src/components/Code/codeLanguages.ts
+var CODE_LANGUAGES = [
+	{
+		value: "plaintext",
+		label: "Plain text",
+		aliases: [
+			"",
+			"text",
+			"txt"
+		]
+	},
+	{
+		value: "python",
+		label: "Python",
+		aliases: ["py"]
+	},
+	{
+		value: "javascript",
+		label: "JavaScript",
+		aliases: ["js"]
+	},
+	{
+		value: "typescript",
+		label: "TypeScript",
+		aliases: ["ts"]
+	},
+	{
+		value: "json",
+		label: "JSON",
+		aliases: []
+	},
+	{
+		value: "shell",
+		label: "Shell",
+		aliases: [
+			"bash",
+			"sh",
+			"zsh"
+		]
+	},
+	{
+		value: "yaml",
+		label: "YAML",
+		aliases: ["yml"]
+	},
+	{
+		value: "markdown",
+		label: "Markdown",
+		aliases: ["md"]
+	}
+];
+function resolveCodeLanguage(value) {
+	const normalized = value.trim().toLowerCase();
+	return CODE_LANGUAGES.find((language) => language.value === normalized || language.aliases.includes(normalized))?.value;
+}
+//#endregion
+export { CODE_LANGUAGES, resolveCodeLanguage };
+//# sourceMappingURL=codeLanguages.js.map

package/dist/components/Code/codeLanguages.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"codeLanguages.js","names":[],"sources":["../../../src/components/Code/codeLanguages.ts"],"sourcesContent":["import type { CodeLanguageType } from './types';\n\nexport const CODE_LANGUAGES: {\n value: CodeLanguageType;\n label: string;\n aliases: string[];\n}[] = [\n { value: 'plaintext', label: 'Plain text', aliases: ['', 'text', 'txt'] },\n { value: 'python', label: 'Python', aliases: ['py'] },\n { value: 'javascript', label: 'JavaScript', aliases: ['js'] },\n { value: 'typescript', label: 'TypeScript', aliases: ['ts'] },\n { value: 'json', label: 'JSON', aliases: [] },\n { value: 'shell', label: 'Shell', aliases: ['bash', 'sh', 'zsh'] },\n { value: 'yaml', label: 'YAML', aliases: ['yml'] },\n { value: 'markdown', label: 'Markdown', aliases: ['md'] },\n];\n\nexport function resolveCodeLanguage(\n value: string\n): CodeLanguageType | undefined {\n const normalized = value.trim().toLowerCase();\n return CODE_LANGUAGES.find(\n (language) =>\n language.value === normalized || language.aliases.includes(normalized)\n )?.value;\n}\n"],"mappings":";AAEA,IAAa,iBAIP;CACJ;EAAE,OAAO;EAAa,OAAO;EAAc,SAAS;GAAC;GAAI;GAAQ;EAAK;CAAE;CACxE;EAAE,OAAO;EAAU,OAAO;EAAU,SAAS,CAAC,IAAI;CAAE;CACpD;EAAE,OAAO;EAAc,OAAO;EAAc,SAAS,CAAC,IAAI;CAAE;CAC5D;EAAE,OAAO;EAAc,OAAO;EAAc,SAAS,CAAC,IAAI;CAAE;CAC5D;EAAE,OAAO;EAAQ,OAAO;EAAQ,SAAS,CAAC;CAAE;CAC5C;EAAE,OAAO;EAAS,OAAO;EAAS,SAAS;GAAC;GAAQ;GAAM;EAAK;CAAE;CACjE;EAAE,OAAO;EAAQ,OAAO;EAAQ,SAAS,CAAC,KAAK;CAAE;CACjD;EAAE,OAAO;EAAY,OAAO;EAAY,SAAS,CAAC,IAAI;CAAE;AAC1D;AAEA,SAAgB,oBACd,OAC8B;CAC9B,MAAM,aAAa,MAAM,KAAK,CAAC,CAAC,YAAY;CAC5C,OAAO,eAAe,MACnB,aACC,SAAS,UAAU,cAAc,SAAS,QAAQ,SAAS,UAAU,CACzE,CAAC,EAAE;AACL"}

package/dist/components/Code/index.d.ts CHANGED Viewed

@@ -1,6 +1,13 @@
+import { type ReactNode } from 'react';
 import type { Extension } from '@codemirror/state';
-import type { EditorView } from '@codemirror/view';
+import type { EditorView, ViewUpdate } from '@codemirror/view';
 import type { CodeLanguageType } from './types.js';
+export { CodeLanguageSelect } from './CodeLanguageSelect.js';
+export type { CodeLanguageSelectProps } from './CodeLanguageSelect.js';
+export { CodeToolbar } from './CodeToolbar.js';
+export type { CodeToolbarProps } from './CodeToolbar.js';
+export { CODE_LANGUAGES, resolveCodeLanguage } from './codeLanguages.js';
+export type { CodeLanguageType } from './types.js';
 /** Props for the syntax-highlighted CodeMirror block. */
 export interface CodeProps {
     language: CodeLanguageType;
@@ -15,10 +22,16 @@ export interface CodeProps {
     width?: string;
     fontSize?: string;
     placeholder?: string;
+    ariaLabel?: string;
+    toolbar?: ReactNode;
+    /** Floating copy control when no toolbar is supplied. */
     showCopyButton?: boolean;
+    showFoldGutter?: boolean;
     testId?: string;
     variant?: 'plain' | 'full';
     onCreateEditor?: (view: EditorView) => void;
+    /** Receives document and selection updates, including programmatic changes. */
+    onUpdate?: (update: ViewUpdate) => void;
     converterExtensions?: Extension[];
 }
 /**
@@ -27,4 +40,4 @@ export interface CodeProps {
  * Import directly from `@langchain/macaw-components/Code` so the CodeMirror
  * dependency is only loaded by surfaces that use it.
  */
-export declare const Code: ({ value, readOnly, onChange, autoFocus, placeholder, language, extensions, converterExtensions, height, maxHeight, omitMaxHeight, width, fontSize, onCreateEditor, variant, testId, showCopyButton, }: CodeProps) => import("react").JSX.Element | null;
+export declare const Code: ({ value, readOnly, onChange, autoFocus, placeholder, ariaLabel, language, extensions, converterExtensions, height, maxHeight, omitMaxHeight, width, fontSize, onCreateEditor, onUpdate, variant, testId, toolbar, showCopyButton, showFoldGutter, }: CodeProps) => import("react").JSX.Element | null;