@pega/cosmos-react-tools 8.0.0-build.9.1 → 8.0.0

package/lib/components/AgentTracer/AgentTraceEvent.d.ts

@@ -0,0 +1,4 @@
+import type { AgentTraceEventProps } from './AgentTracer.types';
+declare const AgentTraceEvent: ({ primary, secondary, icon, metrics, testId }: Pick<AgentTraceEventProps, "primary" | "secondary" | "icon" | "metrics" | "testId">) => import("react/jsx-runtime").JSX.Element;
+export default AgentTraceEvent;
+//# sourceMappingURL=AgentTraceEvent.d.ts.map

package/lib/components/AgentTracer/AgentTraceEvent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AgentTraceEvent.d.ts","sourceRoot":"","sources":["../../../src/components/AgentTracer/AgentTraceEvent.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EACV,oBAAoB,EAGrB,MAAM,qBAAqB,CAAC;AAgC7B,QAAA,MAAM,eAAe,kDAMlB,IAAI,CAAC,oBAAoB,EAAE,SAAS,GAAG,WAAW,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,CAAC,4CAgBrF,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/lib/components/AgentTracer/AgentTraceEvent.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { IconTile } from '@pega/cosmos-react-build';
+import { FieldValueItem, Flex, formatDuration, Text, useConfiguration } from '@pega/cosmos-react-core';
+import { StyledAgentMetricItem, StyledEventLabel, StyledEventLabelContainer } from './AgentTracer.styles';
+const MetricItem = ({ metric, testId }) => {
+    const { locale } = useConfiguration();
+    return metric ? (_jsx(FieldValueItem, { name: metric.label, value: _jsx(StyledAgentMetricItem, { children: metric.type === 'duration'
+                ? formatDuration(metric.value, {
+                    locale,
+                    significantUnits: 2,
+                    maxPrecision: 'millisecond'
+                })
+                : `${metric.value}` }), variant: 'stacked', testId: testId })) : (_jsx(StyledAgentMetricItem, {}));
+};
+const AgentTraceEvent = ({ primary, secondary, icon, metrics, testId }) => {
+    return (_jsxs(Flex, { container: { justify: 'between', alignItems: 'center', gap: 2 }, children: [_jsxs(Flex, { container: { gap: 1, alignItems: 'center' }, item: { basis: '50%' }, children: [_jsx(IconTile, { ...icon }), _jsxs(StyledEventLabelContainer, { container: { direction: 'column', colGap: 1 }, children: [_jsx(Text, { variant: 'secondary', children: secondary }), _jsx(StyledEventLabel, { "data-testid": testId, children: primary })] })] }), _jsxs(Flex, { container: { gap: 2, justify: 'end' }, as: 'dl', children: [_jsx(MetricItem, { metric: metrics?.[0], testId: testId }), _jsx(MetricItem, { metric: metrics?.[1], testId: testId })] })] }));
+};
+export default AgentTraceEvent;
+//# sourceMappingURL=AgentTraceEvent.js.map

package/lib/components/AgentTracer/AgentTraceEvent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AgentTraceEvent.js","sourceRoot":"","sources":["../../../src/components/AgentTracer/AgentTraceEvent.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AACpD,OAAO,EACL,cAAc,EACd,IAAI,EACJ,cAAc,EACd,IAAI,EACJ,gBAAgB,EACjB,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EACL,qBAAqB,EACrB,gBAAgB,EAChB,yBAAyB,EAC1B,MAAM,sBAAsB,CAAC;AAO9B,MAAM,UAAU,GAAG,CAAC,EAClB,MAAM,EACN,MAAM,EAGM,EAAE,EAAE;IAChB,MAAM,EAAE,MAAM,EAAE,GAAG,gBAAgB,EAAE,CAAC;IAEtC,OAAO,MAAM,CAAC,CAAC,CAAC,CACd,KAAC,cAAc,IACb,IAAI,EAAE,MAAM,CAAC,KAAK,EAClB,KAAK,EACH,KAAC,qBAAqB,cACnB,MAAM,CAAC,IAAI,KAAK,UAAU;gBACzB,CAAC,CAAC,cAAc,CAAC,MAAM,CAAC,KAAK,EAAE;oBAC3B,MAAM;oBACN,gBAAgB,EAAE,CAAC;oBACnB,YAAY,EAAE,aAAa;iBAC5B,CAAC;gBACJ,CAAC,CAAC,GAAG,MAAM,CAAC,KAAK,EAAE,GACC,EAE1B,OAAO,EAAC,SAAS,EACjB,MAAM,EAAE,MAAM,GACd,CACH,CAAC,CAAC,CAAC,CACF,KAAC,qBAAqB,KAAG,CAC1B,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,eAAe,GAAG,CAAC,EACvB,OAAO,EACP,SAAS,EACT,IAAI,EACJ,OAAO,EACP,MAAM,EAC8E,EAAE,EAAE;IACxF,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aACnE,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,IAAI,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,aACvE,KAAC,QAAQ,OAAK,IAAI,GAAI,EACtB,MAAC,yBAAyB,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC,EAAE,aACtE,KAAC,IAAI,IAAC,OAAO,EAAC,WAAW,YAAE,SAAS,GAAQ,EAC5C,KAAC,gBAAgB,mBAAc,MAAM,YAAG,OAAO,GAAoB,IACzC,IACvB,EACP,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE,EAAC,IAAI,aAClD,KAAC,UAAU,IAAC,MAAM,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,MAAM,GAAI,EACpD,KAAC,UAAU,IAAC,MAAM,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,MAAM,GAAI,IAC/C,IACF,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,eAAe,CAAC","sourcesContent":["import { IconTile } from '@pega/cosmos-react-build';\nimport {\n  FieldValueItem,\n  Flex,\n  formatDuration,\n  Text,\n  useConfiguration\n} from '@pega/cosmos-react-core';\nimport type { TestIdProp } from '@pega/cosmos-react-core';\n\nimport {\n  StyledAgentMetricItem,\n  StyledEventLabel,\n  StyledEventLabelContainer\n} from './AgentTracer.styles';\nimport type {\n  AgentTraceEventProps,\n  AgentTracerDurationMetric,\n  AgentTracerTokenMetric\n} from './AgentTracer.types';\n\nconst MetricItem = ({\n  metric,\n  testId\n}: {\n  metric?: AgentTracerDurationMetric | AgentTracerTokenMetric;\n} & TestIdProp) => {\n  const { locale } = useConfiguration();\n\n  return metric ? (\n    <FieldValueItem\n      name={metric.label}\n      value={\n        <StyledAgentMetricItem>\n          {metric.type === 'duration'\n            ? formatDuration(metric.value, {\n                locale,\n                significantUnits: 2,\n                maxPrecision: 'millisecond'\n              })\n            : `${metric.value}`}\n        </StyledAgentMetricItem>\n      }\n      variant='stacked'\n      testId={testId}\n    />\n  ) : (\n    <StyledAgentMetricItem />\n  );\n};\n\nconst AgentTraceEvent = ({\n  primary,\n  secondary,\n  icon,\n  metrics,\n  testId\n}: Pick<AgentTraceEventProps, 'primary' | 'secondary' | 'icon' | 'metrics' | 'testId'>) => {\n  return (\n    <Flex container={{ justify: 'between', alignItems: 'center', gap: 2 }}>\n      <Flex container={{ gap: 1, alignItems: 'center' }} item={{ basis: '50%' }}>\n        <IconTile {...icon} />\n        <StyledEventLabelContainer container={{ direction: 'column', colGap: 1 }}>\n          <Text variant='secondary'>{secondary}</Text>\n          <StyledEventLabel data-testid={testId}>{primary}</StyledEventLabel>\n        </StyledEventLabelContainer>\n      </Flex>\n      <Flex container={{ gap: 2, justify: 'end' }} as='dl'>\n        <MetricItem metric={metrics?.[0]} testId={testId} />\n        <MetricItem metric={metrics?.[1]} testId={testId} />\n      </Flex>\n    </Flex>\n  );\n};\n\nexport default AgentTraceEvent;\n"]}

package/lib/components/AgentTracer/AgentTraceEventDetails.d.ts

@@ -0,0 +1,4 @@
+import type { AgentTraceEventDetailsProps } from './AgentTracer.types';
+declare const AgentTraceEventDetails: ({ primary, secondary, metrics, icon, contents, metricGroups, testId }: AgentTraceEventDetailsProps) => import("react/jsx-runtime").JSX.Element;
+export default AgentTraceEventDetails;
+//# sourceMappingURL=AgentTraceEventDetails.d.ts.map

package/lib/components/AgentTracer/AgentTraceEventDetails.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AgentTraceEventDetails.d.ts","sourceRoot":"","sources":["../../../src/components/AgentTracer/AgentTraceEventDetails.tsx"],"names":[],"mappings":"AA8BA,OAAO,KAAK,EAEV,2BAA2B,EAE5B,MAAM,qBAAqB,CAAC;AAqF7B,QAAA,MAAM,sBAAsB,0EAQzB,2BAA2B,4CAkC7B,CAAC;AAEF,eAAe,sBAAsB,CAAC"}

package/lib/components/AgentTracer/AgentTraceEventDetails.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from 'react';
+import { CodeEditor } from '@pega/cosmos-react-build';
+import { Button, FieldValueItem, FieldValueList, Flex, Icon, registerIcon, StyledLabel, Text, tryCatch, useBreakpoint, useI18n, useToaster, VisuallyHiddenText } from '@pega/cosmos-react-core';
+import * as CopyIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/copy.icon';
+import AgentTraceEvent from './AgentTraceEvent';
+import { StyledAgentTracerContent, StyledAgentTracerMetricGroup, StyledAgentTracerMetricLabel, StyledContentsGroupContainer, StyledDetailsHeader, StyledRichTextViewer, StyledScrollWrapper } from './AgentTracer.styles';
+registerIcon(CopyIcon);
+const CopyButton = ({ value }) => {
+    const { push } = useToaster();
+    const t = useI18n();
+    const handleCopy = (message) => {
+        if (message) {
+            navigator.clipboard.writeText(message).then(() => {
+                push({ content: t('copied_to_clipboard') });
+            }, () => {
+                push({ content: t('failed_to_copy') });
+            });
+        }
+    };
+    return (_jsxs(Button, { variant: 'link', icon: true, onClick: () => handleCopy(value), children: [_jsx(Icon, { name: 'copy', size: 'font-size' }), _jsx(Text, { variant: 'primary', children: t('copy') })] }));
+};
+const ContentContainer = ({ id, label, value }) => {
+    const parsedValue = tryCatch(() => {
+        return JSON.stringify(JSON.parse(value), null, 2);
+    });
+    const codeEditorHandle = useRef(null);
+    return (_jsxs(StyledAgentTracerContent, { container: { direction: 'column', gap: 1 }, item: { grow: 1 }, children: [_jsxs(Flex, { container: { justify: 'between', alignItems: 'center' }, children: [_jsx(StyledLabel, { as: 'span', children: label }), _jsx(CopyButton, { value: value })] }), parsedValue ? (_jsx(CodeEditor, { codeEditorHandle: codeEditorHandle, defaultValue: parsedValue, readOnly: true, editorConfigProps: {
+                    mode: 'json',
+                    readOnly: 'nocursor',
+                    lineNumbers: true
+                } }, id)) : (_jsx(StyledRichTextViewer, { content: value, type: 'markdown' }))] }));
+};
+const EventMetricGroup = ({ label, metrics }) => {
+    const metricGroupContainer = useRef(null);
+    const isSmallOrAbove = useBreakpoint('sm', { breakpointRef: metricGroupContainer });
+    return (_jsxs(StyledAgentTracerMetricGroup, { container: { direction: 'column', gap: 0.5 }, ref: metricGroupContainer, children: [_jsx(StyledAgentTracerMetricLabel, { as: 'span', children: label }), isSmallOrAbove ? (_jsx(Flex, { container: { gap: 3 }, as: 'dl', children: metrics.map(metric => {
+                    return _jsx(FieldValueItem, { name: metric.label, value: metric.value, variant: 'stacked' });
+                }) })) : (_jsx(FieldValueList, { fields: metrics.map(metric => ({ name: metric.label, value: metric.value })) }))] }));
+};
+const AgentTraceEventDetails = ({ primary, secondary, metrics, icon, contents, metricGroups, testId }) => {
+    const t = useI18n();
+    return (_jsxs(StyledScrollWrapper, { container: { direction: 'column' }, children: [_jsx(VisuallyHiddenText, { as: 'h3', children: t('details') }), _jsx(StyledDetailsHeader, { item: { grow: 0 }, children: _jsx(AgentTraceEvent, { primary: primary, secondary: secondary, icon: icon, metrics: metrics, testId: testId }) }), metricGroups && metricGroups.length > 0 && (_jsx(StyledContentsGroupContainer, { container: { direction: 'column', gap: 2 }, item: { shrink: 0 }, children: metricGroups.map(metricGroup => (_jsx(EventMetricGroup, { ...metricGroup }))) })), contents && contents.length > 0 && (_jsx(StyledContentsGroupContainer, { container: { direction: 'column', gap: 1 }, children: contents.map(content => (_jsx(ContentContainer, { ...content }))) }))] }));
+};
+export default AgentTraceEventDetails;
+//# sourceMappingURL=AgentTraceEventDetails.js.map

package/lib/components/AgentTracer/AgentTraceEventDetails.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AgentTraceEventDetails.js","sourceRoot":"","sources":["../../../src/components/AgentTracer/AgentTraceEventDetails.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useRef } from 'react';\n\nimport { CodeEditor } from '@pega/cosmos-react-build';\nimport {\n  Button,\n  FieldValueItem,\n  FieldValueList,\n  Flex,\n  Icon,\n  registerIcon,\n  StyledLabel,\n  Text,\n  tryCatch,\n  useBreakpoint,\n  useI18n,\n  useToaster,\n  VisuallyHiddenText\n} from '@pega/cosmos-react-core';\nimport * as CopyIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/copy.icon';\n\nimport AgentTraceEvent from './AgentTraceEvent';\nimport {\n  StyledAgentTracerContent,\n  StyledAgentTracerMetricGroup,\n  StyledAgentTracerMetricLabel,\n  StyledContentsGroupContainer,\n  StyledDetailsHeader,\n  StyledRichTextViewer,\n  StyledScrollWrapper\n} from './AgentTracer.styles';\nimport type {\n  AgentTraceEventContent,\n  AgentTraceEventDetailsProps,\n  AgentTraceMetricGroupProps\n} from './AgentTracer.types';\n\nregisterIcon(CopyIcon);\n\nconst CopyButton = ({ value }: { value: string }) => {\n  const { push } = useToaster();\n  const t = useI18n();\n\n  const handleCopy = (message: string) => {\n    if (message) {\n      navigator.clipboard.writeText(message).then(\n        () => {\n          push({ content: t('copied_to_clipboard') });\n        },\n        () => {\n          push({ content: t('failed_to_copy') });\n        }\n      );\n    }\n  };\n\n  return (\n    <Button variant='link' icon onClick={() => handleCopy(value)}>\n      <Icon name='copy' size='font-size' />\n      <Text variant='primary'>{t('copy')}</Text>\n    </Button>\n  );\n};\n\nconst ContentContainer = ({ id, label, value }: AgentTraceEventContent) => {\n  const parsedValue = tryCatch(() => {\n    return JSON.stringify(JSON.parse(value), null, 2);\n  });\n  const codeEditorHandle = useRef(null);\n\n  return (\n    <StyledAgentTracerContent container={{ direction: 'column', gap: 1 }} item={{ grow: 1 }}>\n      <Flex container={{ justify: 'between', alignItems: 'center' }}>\n        <StyledLabel as='span'>{label}</StyledLabel>\n        <CopyButton value={value} />\n      </Flex>\n      {parsedValue ? (\n        <CodeEditor\n          key={id}\n          codeEditorHandle={codeEditorHandle}\n          defaultValue={parsedValue}\n          readOnly\n          editorConfigProps={{\n            mode: 'json',\n            readOnly: 'nocursor',\n            lineNumbers: true\n          }}\n        />\n      ) : (\n        <StyledRichTextViewer content={value} type='markdown' />\n      )}\n    </StyledAgentTracerContent>\n  );\n};\n\nconst EventMetricGroup = ({ label, metrics }: AgentTraceMetricGroupProps) => {\n  const metricGroupContainer = useRef<HTMLElement>(null);\n  const isSmallOrAbove = useBreakpoint('sm', { breakpointRef: metricGroupContainer });\n\n  return (\n    <StyledAgentTracerMetricGroup\n      container={{ direction: 'column', gap: 0.5 }}\n      ref={metricGroupContainer}\n    >\n      <StyledAgentTracerMetricLabel as='span'>{label}</StyledAgentTracerMetricLabel>\n      {isSmallOrAbove ? (\n        <Flex container={{ gap: 3 }} as='dl'>\n          {metrics.map(metric => {\n            return <FieldValueItem name={metric.label} value={metric.value} variant='stacked' />;\n          })}\n        </Flex>\n      ) : (\n        <FieldValueList\n          fields={metrics.map(metric => ({ name: metric.label, value: metric.value }))}\n        />\n      )}\n    </StyledAgentTracerMetricGroup>\n  );\n};\n\nconst AgentTraceEventDetails = ({\n  primary,\n  secondary,\n  metrics,\n  icon,\n  contents,\n  metricGroups,\n  testId\n}: AgentTraceEventDetailsProps) => {\n  const t = useI18n();\n\n  return (\n    <StyledScrollWrapper container={{ direction: 'column' }}>\n      <VisuallyHiddenText as='h3'>{t('details')}</VisuallyHiddenText>\n      <StyledDetailsHeader item={{ grow: 0 }}>\n        <AgentTraceEvent\n          primary={primary}\n          secondary={secondary}\n          icon={icon}\n          metrics={metrics}\n          testId={testId}\n        />\n      </StyledDetailsHeader>\n      {metricGroups && metricGroups.length > 0 && (\n        <StyledContentsGroupContainer\n          container={{ direction: 'column', gap: 2 }}\n          item={{ shrink: 0 }}\n        >\n          {metricGroups.map(metricGroup => (\n            <EventMetricGroup {...metricGroup} />\n          ))}\n        </StyledContentsGroupContainer>\n      )}\n      {contents && contents.length > 0 && (\n        <StyledContentsGroupContainer container={{ direction: 'column', gap: 1 }}>\n          {contents.map(content => (\n            <ContentContainer {...content} />\n          ))}\n        </StyledContentsGroupContainer>\n      )}\n    </StyledScrollWrapper>\n  );\n};\n\nexport default AgentTraceEventDetails;\n"]}

package/lib/components/AgentTracer/AgentTracer.d.ts

@@ -0,0 +1,6 @@
+import type { AgentTracerProps } from './AgentTracer.types';
+declare const _default: (({ primary, events, metrics, secondary, onRefresh, loading, error, testId }: AgentTracerProps) => import("react/jsx-runtime").JSX.Element) & {
+    getTestIds: (testIdProp?: import("@pega/cosmos-react-core").TestIdProp["testId"]) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["header", "refresh", "events", "details"]>;
+};
+export default _default;
+//# sourceMappingURL=AgentTracer.d.ts.map

package/lib/components/AgentTracer/AgentTracer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AgentTracer.d.ts","sourceRoot":"","sources":["../../../src/components/AgentTracer/AgentTracer.tsx"],"names":[],"mappings":"AAwBA,OAAO,KAAK,EAA+B,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;sGAWtF,gBAAgB;;;AAgFnB,wBAA4D"}

package/lib/components/AgentTracer/AgentTracer.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { Button, EmptyState, ErrorState, Flex, Progress, useI18n, useTestIds, withTestIds } from '@pega/cosmos-react-core';
+import AgentTracerEvent from './AgentTraceEvent';
+import AgentTraceEventDetails from './AgentTraceEventDetails';
+import { StyledAgentTracerContainer, StyledDetailsContainer, StyledScrollWrapper, StyledAgentTracerHeader, StyledAgentTracerTreeContainer } from './AgentTracer.styles';
+import { agentTracerTestIds } from './AgentTracer.test-ids';
+import AgentTracerTree from './AgentTracerTree';
+const AgentTracer = ({ primary, events, metrics, secondary, onRefresh, loading, error, testId }) => {
+    const [selectedEvent, setSelectedEvent] = useState();
+    const tracerRef = useRef(null);
+    const testIds = useTestIds(testId, agentTracerTestIds);
+    const t = useI18n();
+    useEffect(() => {
+        setSelectedEvent(events?.find(event => event.selected));
+    }, [events]);
+    const tracerContent = useMemo(() => {
+        if (loading || error) {
+            return (_jsx(Flex, { container: { justify: 'center', alignItems: 'center' }, children: loading ? (_jsx(Progress, { variant: 'ring', placement: 'block', message: t('loading') })) : (_jsx(ErrorState, { message: error })) }));
+        }
+        if (!events?.length) {
+            return _jsx(EmptyState, { message: t('no_conversations_found') });
+        }
+        return (_jsxs(StyledScrollWrapper, { item: { grow: 1, basis: '90%' }, container: { direction: 'column' }, md: { container: { direction: 'row' } }, children: [_jsx(StyledAgentTracerTreeContainer, { item: { basis: '35%' }, children: _jsx(AgentTracerTree, { events: events, onSelect: event => {
+                            setSelectedEvent(event);
+                        }, selectedNodeId: selectedEvent?.id, testId: testIds.events }) }), _jsx(StyledScrollWrapper, { item: { basis: '65%' }, children: selectedEvent ? (_jsx(StyledDetailsContainer, { container: { direction: 'column', gap: 2 }, children: _jsx(AgentTraceEventDetails, { ...selectedEvent, testId: testIds.details }) })) : (_jsx(EmptyState, { message: t('agent_tracer_select_an_event') })) })] }));
+    }, [loading, error, events, selectedEvent]);
+    return (_jsxs(StyledAgentTracerContainer, { container: { direction: 'column' }, ref: tracerRef, children: [_jsxs(StyledAgentTracerHeader, { container: { gap: 2, alignItems: 'center' }, item: { grow: 0 }, children: [_jsx(Flex, { item: { grow: 1 }, children: _jsx(AgentTracerEvent, { icon: { name: 'polaris-solid', category: 'ai', size: 'xl' }, primary: primary, metrics: metrics, secondary: secondary || t('agent'), testId: testIds.header }) }), onRefresh && (_jsx(Button, { variant: 'primary', onClick: onRefresh, "data-testid": testIds.refresh, children: t('refresh') }))] }), tracerContent] }));
+};
+export default withTestIds(AgentTracer, agentTracerTestIds);
+//# sourceMappingURL=AgentTracer.js.map

package/lib/components/AgentTracer/AgentTracer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AgentTracer.js","sourceRoot":"","sources":["../../../src/components/AgentTracer/AgentTracer.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useMemo, useRef, useState } from 'react';\n\nimport {\n  Button,\n  EmptyState,\n  ErrorState,\n  Flex,\n  Progress,\n  useI18n,\n  useTestIds,\n  withTestIds\n} from '@pega/cosmos-react-core';\n\nimport AgentTracerEvent from './AgentTraceEvent';\nimport AgentTraceEventDetails from './AgentTraceEventDetails';\nimport {\n  StyledAgentTracerContainer,\n  StyledDetailsContainer,\n  StyledScrollWrapper,\n  StyledAgentTracerHeader,\n  StyledAgentTracerTreeContainer\n} from './AgentTracer.styles';\nimport { agentTracerTestIds } from './AgentTracer.test-ids';\nimport AgentTracerTree from './AgentTracerTree';\nimport type { AgentTraceEventDetailsProps, AgentTracerProps } from './AgentTracer.types';\n\nconst AgentTracer = ({\n  primary,\n  events,\n  metrics,\n  secondary,\n  onRefresh,\n  loading,\n  error,\n  testId\n}: AgentTracerProps) => {\n  const [selectedEvent, setSelectedEvent] = useState<AgentTraceEventDetailsProps | undefined>();\n  const tracerRef = useRef<HTMLButtonElement>(null);\n  const testIds = useTestIds(testId, agentTracerTestIds);\n\n  const t = useI18n();\n\n  useEffect(() => {\n    setSelectedEvent(events?.find(event => event.selected));\n  }, [events]);\n\n  const tracerContent = useMemo(() => {\n    if (loading || error) {\n      return (\n        <Flex container={{ justify: 'center', alignItems: 'center' }}>\n          {loading ? (\n            <Progress variant='ring' placement='block' message={t('loading')} />\n          ) : (\n            <ErrorState message={error} />\n          )}\n        </Flex>\n      );\n    }\n    if (!events?.length) {\n      return <EmptyState message={t('no_conversations_found')} />;\n    }\n\n    return (\n      <StyledScrollWrapper\n        item={{ grow: 1, basis: '90%' }}\n        container={{ direction: 'column' }}\n        md={{ container: { direction: 'row' } }}\n      >\n        <StyledAgentTracerTreeContainer item={{ basis: '35%' }}>\n          <AgentTracerTree\n            events={events}\n            onSelect={event => {\n              setSelectedEvent(event);\n            }}\n            selectedNodeId={selectedEvent?.id}\n            testId={testIds.events}\n          />\n        </StyledAgentTracerTreeContainer>\n\n        <StyledScrollWrapper item={{ basis: '65%' }}>\n          {selectedEvent ? (\n            <StyledDetailsContainer container={{ direction: 'column', gap: 2 }}>\n              <AgentTraceEventDetails {...selectedEvent} testId={testIds.details} />\n            </StyledDetailsContainer>\n          ) : (\n            <EmptyState message={t('agent_tracer_select_an_event')} />\n          )}\n        </StyledScrollWrapper>\n      </StyledScrollWrapper>\n    );\n  }, [loading, error, events, selectedEvent]);\n\n  return (\n    <StyledAgentTracerContainer container={{ direction: 'column' }} ref={tracerRef}>\n      <StyledAgentTracerHeader container={{ gap: 2, alignItems: 'center' }} item={{ grow: 0 }}>\n        <Flex item={{ grow: 1 }}>\n          <AgentTracerEvent\n            icon={{ name: 'polaris-solid', category: 'ai', size: 'xl' }}\n            primary={primary}\n            metrics={metrics}\n            secondary={secondary || t('agent')}\n            testId={testIds.header}\n          />\n        </Flex>\n        {onRefresh && (\n          <Button variant='primary' onClick={onRefresh} data-testid={testIds.refresh}>\n            {t('refresh')}\n          </Button>\n        )}\n      </StyledAgentTracerHeader>\n      {tracerContent}\n    </StyledAgentTracerContainer>\n  );\n};\n\nexport default withTestIds(AgentTracer, agentTracerTestIds);\n"]}

package/lib/components/AgentTracer/AgentTracer.styles.d.ts

@@ -0,0 +1,19 @@
+export declare const StyledAgentTracerHeader: import("styled-components").StyledComponent<import("@pega/cosmos-react-core").ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core").FlexProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledScrollWrapper: import("styled-components").StyledComponent<import("@pega/cosmos-react-core").ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core").FlexProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledContentsGroupContainer: import("styled-components").StyledComponent<import("@pega/cosmos-react-core").ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core").FlexProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledAgentTracerTreeContainer: import("styled-components").StyledComponent<import("@pega/cosmos-react-core").ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core").FlexProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledAgentTracerContainer: import("styled-components").StyledComponent<import("@pega/cosmos-react-core").ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core").FlexProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledEventLabelContainer: import("styled-components").StyledComponent<import("@pega/cosmos-react-core").ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core").FlexProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledEventLabel: import("styled-components").StyledComponent<import("@pega/cosmos-react-core").ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core").TextProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledAgentTreeItem: import("styled-components").StyledComponent<import("@pega/cosmos-react-core").ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core").FlexProps>, import("styled-components").DefaultTheme, {}, never>;
+/** Details */
+export declare const StyledDetailsContainer: import("styled-components").StyledComponent<import("@pega/cosmos-react-core").ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core").FlexProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledDetailsHeader: import("styled-components").StyledComponent<import("@pega/cosmos-react-core").ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core").FlexProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledRichTextViewer: import("styled-components").StyledComponent<import("@pega/cosmos-react-core").ForwardRefForwardPropsComponent<import("@pega/cosmos-react-rte").RichTextViewerProps> & {
+    getTestIds: (testIdProp?: import("@pega/cosmos-react-core").TestIdProp["testId"]) => import("@pega/cosmos-react-core").TestIdsRecord<readonly []>;
+}, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledAgentTracerContent: import("styled-components").StyledComponent<import("@pega/cosmos-react-core").ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core").FlexProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledAgentTracerMetricGroup: import("styled-components").StyledComponent<import("@pega/cosmos-react-core").ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core").FlexProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledAgentTracerMetricLabel: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, Pick<import("@pega/cosmos-react-core").LabelProps, "htmlFor" | "labelHidden">, never>;
+export declare const StyledAgentMetricItem: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+//# sourceMappingURL=AgentTracer.styles.d.ts.map

package/lib/components/AgentTracer/AgentTracer.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AgentTracer.styles.d.ts","sourceRoot":"","sources":["../../../src/components/AgentTracer/AgentTracer.styles.ts"],"names":[],"mappings":"AAaA,eAAO,MAAM,uBAAuB,kNAMnC,CAAC;AAIF,eAAO,MAAM,mBAAmB,kNAG/B,CAAC;AAIF,eAAO,MAAM,4BAA4B,kNAKxC,CAAC;AAIF,eAAO,MAAM,8BAA8B,kNAgBzC,CAAC;AAMH,eAAO,MAAM,0BAA0B,kNAKtC,CAAC;AAIF,eAAO,MAAM,yBAAyB,kNAGrC,CAAC;AAEF,eAAO,MAAM,gBAAgB,kNAS5B,CAAC;AAIF,eAAO,MAAM,mBAAmB,kNAO9B,CAAC;AAIH,cAAc;AACd,eAAO,MAAM,sBAAsB,kNAUjC,CAAC;AAIH,eAAO,MAAM,mBAAmB,kNAU/B,CAAC;AAIF,eAAO,MAAM,oBAAoB;2BArHhB,CAAC,SAAU,yBAAwB,kCAE7C,yBAAyB;uDA2H/B,CAAC;AAIF,eAAO,MAAM,wBAAwB,kNAQpC,CAAC;AAIF,eAAO,MAAM,4BAA4B,kNAIxC,CAAC;AAIF,eAAO,MAAM,4BAA4B,sLAOvC,CAAC;AAKH,eAAO,MAAM,qBAAqB,yGAEjC,CAAC"}

package/lib/components/AgentTracer/AgentTracer.styles.js

@@ -0,0 +1,123 @@
+import styled, { css } from 'styled-components';
+import { calculateFontSize, defaultThemeProp, Flex, StyledLabel, Text } from '@pega/cosmos-react-core';
+import { RichTextViewer } from '@pega/cosmos-react-rte';
+import { ellipsisOverflow } from '@pega/cosmos-react-core/lib/styles/mixins';
+export const StyledAgentTracerHeader = styled(Flex)(({ theme }) => css `
+    border: none;
+    border-block-end: 0.0625rem solid ${theme.base.palette['border-line']};
+    padding-block: 0 ${theme.base.spacing};
+  `);
+StyledAgentTracerHeader.defaultProps = defaultThemeProp;
+export const StyledScrollWrapper = styled(Flex) `
+  max-height: 100%;
+  overflow-y: auto;
+`;
+StyledScrollWrapper.defaultProps = defaultThemeProp;
+export const StyledContentsGroupContainer = styled(Flex)(({ theme }) => `
+  overflow-y: auto;
+  padding-block: ${theme.base.spacing};
+`);
+StyledContentsGroupContainer.defaultProps = defaultThemeProp;
+export const StyledAgentTracerTreeContainer = styled(Flex)(({ theme }) => {
+    return css `
+    max-height: 100%;
+    overflow-y: auto;
+    border-block-end: 0.0625rem solid ${theme.base.palette['border-line']};
+    padding-block-end: ${theme.base.spacing};
+    margin-block-end: ${theme.base.spacing};
+
+    @media (min-width: ${theme.base.breakpoints.md}) {
+      border-block-end: 0;
+      padding-block-end: 0;
+      margin-block-end: 0;
+      border-inline-end: 0.0625rem solid ${theme.base.palette['border-line']};
+      margin-inline-end: ${theme.base.spacing};
+    }
+  `;
+});
+StyledAgentTracerTreeContainer.defaultProps = defaultThemeProp;
+/* Main container */
+export const StyledAgentTracerContainer = styled(Flex)(({ theme }) => css `
+    height: calc(var(--case-view-height, 100vh) - 13vh);
+    background-color: ${theme.base.palette['primary-background']};
+  `);
+StyledAgentTracerContainer.defaultProps = defaultThemeProp;
+export const StyledEventLabelContainer = styled(Flex) `
+  ${ellipsisOverflow}
+  display: block;
+`;
+export const StyledEventLabel = styled(Text)(({ theme }) => `
+    overflow: inherit;
+    white-space: inherit;
+    text-overflow: inherit;
+    width: 100%;
+    display: inherit;
+    font-weight: ${theme.base['font-weight']['semi-bold']};
+`);
+StyledEventLabel.defaultProps = defaultThemeProp;
+export const StyledAgentTreeItem = styled(Flex)(({ theme }) => {
+    return css `
+    width: 100%;
+    overflow: hidden;
+    padding-inline-start: calc(2 * ${theme.base.spacing});
+    padding-block: ${theme.base.spacing};
+  `;
+});
+StyledAgentTreeItem.defaultProps = defaultThemeProp;
+/** Details */
+export const StyledDetailsContainer = styled(Flex)(({ theme }) => {
+    return css `
+    padding: ${theme.base.spacing};
+    height: 100%;
+
+    @media (max-width: ${theme.base.breakpoints.md}) {
+      border: 0.0625rem solid ${theme.base.palette['border-line']};
+      border-radius: ${theme.base['border-radius']};
+    }
+  `;
+});
+StyledDetailsContainer.defaultProps = defaultThemeProp;
+export const StyledDetailsHeader = styled(Flex)(({ theme }) => css `
+    position: sticky;
+    inset-block-start: 0;
+    z-index: calc(${theme.base['z-index'].backdrop} - 1);
+    background-color: ${theme.base.palette['primary-background']};
+    border-block-end: 0.0625rem solid ${theme.base.palette['border-line']};
+    padding-block: 0 ${theme.base.spacing};
+    margin-block-end: ${theme.base.spacing};
+  `);
+StyledDetailsHeader.defaultProps = defaultThemeProp;
+export const StyledRichTextViewer = styled(RichTextViewer)(({ theme }) => `
+    border: 0.0625rem solid ${theme.base.palette['border-line']};
+    padding: ${theme.base.spacing};
+    border-radius: ${theme.base.spacing};
+    max-height: 100%;
+    overflow-y: auto;
+`);
+StyledRichTextViewer.defaultProps = defaultThemeProp;
+export const StyledAgentTracerContent = styled(Flex)(({ theme }) => `
+    padding: ${theme.base.spacing};
+    overflow-y: scroll;
+
+    /* minimum height to display code editor without cropping borders */
+    min-height: 7rem;
+`);
+StyledAgentTracerContent.defaultProps = defaultThemeProp;
+export const StyledAgentTracerMetricGroup = styled(Flex)(({ theme }) => `
+    padding-inline: ${theme.base.spacing}
+  `);
+StyledAgentTracerMetricGroup.defaultProps = defaultThemeProp;
+export const StyledAgentTracerMetricLabel = styled(StyledLabel)(({ theme }) => {
+    const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
+    return css `
+    font-size: ${fontSize[theme.components.text.h3['font-size']]};
+    font-family: ${theme.components.text.h3['font-family']};
+    font-weight: ${theme.components.text.h3['font-weight']};
+  `;
+});
+StyledAgentTracerMetricLabel.defaultProps = defaultThemeProp;
+// To keep all Duration and Token metrics aligned irrespective of the value, width is based on max string currently possible ex : '59s 977.777ms'
+export const StyledAgentMetricItem = styled.div `
+  min-width: 13ch;
+`;
+//# sourceMappingURL=AgentTracer.styles.js.map

package/lib/components/AgentTracer/AgentTracer.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AgentTracer.styles.js","sourceRoot":"","sources":["../../../src/components/AgentTracer/AgentTracer.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport {\n  calculateFontSize,\n  defaultThemeProp,\n  Flex,\n  StyledLabel,\n  Text\n} from '@pega/cosmos-react-core';\nimport type { FontSize } from '@pega/cosmos-react-core';\nimport { RichTextViewer } from '@pega/cosmos-react-rte';\nimport { ellipsisOverflow } from '@pega/cosmos-react-core/lib/styles/mixins';\n\nexport const StyledAgentTracerHeader = styled(Flex)(\n  ({ theme }) => css`\n    border: none;\n    border-block-end: 0.0625rem solid ${theme.base.palette['border-line']};\n    padding-block: 0 ${theme.base.spacing};\n  `\n);\n\nStyledAgentTracerHeader.defaultProps = defaultThemeProp;\n\nexport const StyledScrollWrapper = styled(Flex)`\n  max-height: 100%;\n  overflow-y: auto;\n`;\n\nStyledScrollWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledContentsGroupContainer = styled(Flex)(\n  ({ theme }) => `\n  overflow-y: auto;\n  padding-block: ${theme.base.spacing};\n`\n);\n\nStyledContentsGroupContainer.defaultProps = defaultThemeProp;\n\nexport const StyledAgentTracerTreeContainer = styled(Flex)(({ theme }) => {\n  return css`\n    max-height: 100%;\n    overflow-y: auto;\n    border-block-end: 0.0625rem solid ${theme.base.palette['border-line']};\n    padding-block-end: ${theme.base.spacing};\n    margin-block-end: ${theme.base.spacing};\n\n    @media (min-width: ${theme.base.breakpoints.md}) {\n      border-block-end: 0;\n      padding-block-end: 0;\n      margin-block-end: 0;\n      border-inline-end: 0.0625rem solid ${theme.base.palette['border-line']};\n      margin-inline-end: ${theme.base.spacing};\n    }\n  `;\n});\n\nStyledAgentTracerTreeContainer.defaultProps = defaultThemeProp;\n\n/* Main container */\n\nexport const StyledAgentTracerContainer = styled(Flex)(\n  ({ theme }) => css`\n    height: calc(var(--case-view-height, 100vh) - 13vh);\n    background-color: ${theme.base.palette['primary-background']};\n  `\n);\n\nStyledAgentTracerContainer.defaultProps = defaultThemeProp;\n\nexport const StyledEventLabelContainer = styled(Flex)`\n  ${ellipsisOverflow}\n  display: block;\n`;\n\nexport const StyledEventLabel = styled(Text)(\n  ({ theme }) => `\n    overflow: inherit;\n    white-space: inherit;\n    text-overflow: inherit;\n    width: 100%;\n    display: inherit;\n    font-weight: ${theme.base['font-weight']['semi-bold']};\n`\n);\n\nStyledEventLabel.defaultProps = defaultThemeProp;\n\nexport const StyledAgentTreeItem = styled(Flex)(({ theme }) => {\n  return css`\n    width: 100%;\n    overflow: hidden;\n    padding-inline-start: calc(2 * ${theme.base.spacing});\n    padding-block: ${theme.base.spacing};\n  `;\n});\n\nStyledAgentTreeItem.defaultProps = defaultThemeProp;\n\n/** Details */\nexport const StyledDetailsContainer = styled(Flex)(({ theme }) => {\n  return css`\n    padding: ${theme.base.spacing};\n    height: 100%;\n\n    @media (max-width: ${theme.base.breakpoints.md}) {\n      border: 0.0625rem solid ${theme.base.palette['border-line']};\n      border-radius: ${theme.base['border-radius']};\n    }\n  `;\n});\n\nStyledDetailsContainer.defaultProps = defaultThemeProp;\n\nexport const StyledDetailsHeader = styled(Flex)(\n  ({ theme }) => css`\n    position: sticky;\n    inset-block-start: 0;\n    z-index: calc(${theme.base['z-index'].backdrop} - 1);\n    background-color: ${theme.base.palette['primary-background']};\n    border-block-end: 0.0625rem solid ${theme.base.palette['border-line']};\n    padding-block: 0 ${theme.base.spacing};\n    margin-block-end: ${theme.base.spacing};\n  `\n);\n\nStyledDetailsHeader.defaultProps = defaultThemeProp;\n\nexport const StyledRichTextViewer = styled(RichTextViewer)(\n  ({ theme }) => `\n    border: 0.0625rem solid ${theme.base.palette['border-line']};\n    padding: ${theme.base.spacing};\n    border-radius: ${theme.base.spacing};\n    max-height: 100%;\n    overflow-y: auto;\n`\n);\n\nStyledRichTextViewer.defaultProps = defaultThemeProp;\n\nexport const StyledAgentTracerContent = styled(Flex)(\n  ({ theme }) => `\n    padding: ${theme.base.spacing};\n    overflow-y: scroll;\n\n    /* minimum height to display code editor without cropping borders */\n    min-height: 7rem;\n`\n);\n\nStyledAgentTracerContent.defaultProps = defaultThemeProp;\n\nexport const StyledAgentTracerMetricGroup = styled(Flex)(\n  ({ theme }) => `\n    padding-inline: ${theme.base.spacing}\n  `\n);\n\nStyledAgentTracerMetricGroup.defaultProps = defaultThemeProp;\n\nexport const StyledAgentTracerMetricLabel = styled(StyledLabel)(({ theme }) => {\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n  return css`\n    font-size: ${fontSize[theme.components.text.h3['font-size'] as FontSize]};\n    font-family: ${theme.components.text.h3['font-family']};\n    font-weight: ${theme.components.text.h3['font-weight']};\n  `;\n});\n\nStyledAgentTracerMetricLabel.defaultProps = defaultThemeProp;\n\n// To keep all Duration and Token metrics aligned irrespective of the value, width is based on max string currently possible ex : '59s 977.777ms'\nexport const StyledAgentMetricItem = styled.div`\n  min-width: 13ch;\n`;\n"]}

package/lib/components/AgentTracer/AgentTracer.test-ids.d.ts

@@ -0,0 +1,2 @@
+export declare const agentTracerTestIds: (testIdProp?: import("@pega/cosmos-react-core").TestIdProp["testId"]) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["header", "refresh", "events", "details"]>;
+//# sourceMappingURL=AgentTracer.test-ids.d.ts.map

package/lib/components/AgentTracer/AgentTracer.test-ids.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AgentTracer.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/AgentTracer/AgentTracer.test-ids.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,kBAAkB,+KAKpB,CAAC"}

package/lib/components/AgentTracer/AgentTracer.test-ids.js

@@ -0,0 +1,8 @@
+import { createTestIds } from '@pega/cosmos-react-core';
+export const agentTracerTestIds = createTestIds('agent-tracer', [
+    'header',
+    'refresh',
+    'events',
+    'details'
+]);
+//# sourceMappingURL=AgentTracer.test-ids.js.map

package/lib/components/AgentTracer/AgentTracer.test-ids.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AgentTracer.test-ids.js","sourceRoot":"","sources":["../../../src/components/AgentTracer/AgentTracer.test-ids.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAExD,MAAM,CAAC,MAAM,kBAAkB,GAAG,aAAa,CAAC,cAAc,EAAE;IAC9D,QAAQ;IACR,SAAS;IACT,QAAQ;IACR,SAAS;CACD,CAAC,CAAC","sourcesContent":["import { createTestIds } from '@pega/cosmos-react-core';\n\nexport const agentTracerTestIds = createTestIds('agent-tracer', [\n  'header',\n  'refresh',\n  'events',\n  'details'\n] as const);\n"]}

package/lib/components/AgentTracer/AgentTracer.types.d.ts

@@ -0,0 +1,73 @@
+import type { KeyboardEvent, MouseEvent } from 'react';
+import type { IconTileProps } from '@pega/cosmos-react-build';
+import type { TestIdProp, TreeNode } from '@pega/cosmos-react-core';
+export type TracerEventRole = 'system' | 'function' | 'assistant' | 'user' | 'tool' | 'prerequisites';
+export type AgentTracerMetricType = 'duration' | 'tokens' | 'config' | 'other';
+interface AgentTracerBaseMetric {
+    label: string;
+    hideInListView?: boolean;
+    type: AgentTracerMetricType;
+    value: number | string;
+}
+export interface AgentTracerDurationMetric extends AgentTracerBaseMetric {
+    type: 'duration';
+    value: number;
+}
+export interface AgentTracerTokenMetric extends AgentTracerBaseMetric {
+    type: 'tokens';
+    value: number;
+}
+export interface AgentTracerTextMetric extends AgentTracerBaseMetric {
+    type: 'config' | 'other';
+    value: string;
+}
+export interface AgentTraceMetricGroupProps {
+    label: string;
+    metrics: AgentTracerBaseMetric[];
+}
+export interface AgentTraceEventContent {
+    id: string;
+    label: string;
+    value: string;
+}
+export type AgentTracePrimaryMetricItems = [AgentTracerDurationMetric?, AgentTracerTokenMetric?];
+export interface AgentTraceEventProps extends TestIdProp {
+    id: string;
+    primary: string;
+    secondary: string;
+    role: TracerEventRole;
+    icon: IconTileProps;
+    isSystem: boolean;
+    metrics?: AgentTracePrimaryMetricItems;
+    selected?: boolean;
+}
+export interface AgentTraceEventDetailsProps extends AgentTraceEventProps {
+    metricGroups?: AgentTraceMetricGroupProps[];
+    contents?: AgentTraceEventContent[];
+    events?: AgentTraceEventDetailsProps[];
+}
+export interface AgentTracerProps extends TestIdProp {
+    primary: string;
+    secondary?: string;
+    metrics?: AgentTracePrimaryMetricItems;
+    events?: AgentTraceEventDetailsProps[];
+    onRefresh?: () => void;
+    error?: string;
+    loading?: boolean;
+}
+export interface AgentTracerTreeContextProps {
+    currentNodeId?: string;
+    onSelect: (tracerEvent: AgentTraceEventDetailsProps, inputEvent?: KeyboardEvent) => void;
+    onToggle: (inputEvent: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>, nodeId: string) => void;
+    focusedNodeId?: string;
+    nodes: TreeNode[];
+    firstNodeId?: string;
+    changeFocusedNodeId: (nodeId: string, type: string) => void;
+}
+export interface AgentTracerTreeProps extends TestIdProp {
+    events: AgentTraceEventDetailsProps[];
+    onSelect: (traceEvent: AgentTraceEventDetailsProps, keyBoardEvent?: KeyboardEvent) => void;
+    selectedNodeId?: string;
+}
+export {};
+//# sourceMappingURL=AgentTracer.types.d.ts.map

package/lib/components/AgentTracer/AgentTracer.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AgentTracer.types.d.ts","sourceRoot":"","sources":["../../../src/components/AgentTracer/AgentTracer.types.ts"],"names":[],"mappings":"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"}

package/lib/components/AgentTracer/AgentTracer.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=AgentTracer.types.js.map

package/lib/components/AgentTracer/AgentTracer.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AgentTracer.types.js","sourceRoot":"","sources":["../../../src/components/AgentTracer/AgentTracer.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { KeyboardEvent, MouseEvent } from 'react';\n\nimport type { IconTileProps } from '@pega/cosmos-react-build';\nimport type { TestIdProp, TreeNode } from '@pega/cosmos-react-core';\n\nexport type TracerEventRole =\n  | 'system'\n  | 'function'\n  | 'assistant'\n  | 'user'\n  | 'tool'\n  | 'prerequisites';\n\nexport type AgentTracerMetricType = 'duration' | 'tokens' | 'config' | 'other';\n\ninterface AgentTracerBaseMetric {\n  label: string;\n  hideInListView?: boolean;\n  type: AgentTracerMetricType;\n  value: number | string;\n}\n\nexport interface AgentTracerDurationMetric extends AgentTracerBaseMetric {\n  type: 'duration';\n  value: number;\n}\n\nexport interface AgentTracerTokenMetric extends AgentTracerBaseMetric {\n  type: 'tokens';\n  value: number;\n}\n\nexport interface AgentTracerTextMetric extends AgentTracerBaseMetric {\n  type: 'config' | 'other';\n  value: string;\n}\n\nexport interface AgentTraceMetricGroupProps {\n  label: string;\n  metrics: AgentTracerBaseMetric[];\n}\n\nexport interface AgentTraceEventContent {\n  id: string;\n  label: string;\n  value: string;\n}\n\n// restrict order and length of metrics to maintain consistent layout throughout the tree\nexport type AgentTracePrimaryMetricItems = [AgentTracerDurationMetric?, AgentTracerTokenMetric?];\n\nexport interface AgentTraceEventProps extends TestIdProp {\n  id: string;\n  primary: string;\n  secondary: string;\n  role: TracerEventRole;\n  icon: IconTileProps;\n  isSystem: boolean;\n  metrics?: AgentTracePrimaryMetricItems;\n  selected?: boolean;\n}\n\nexport interface AgentTraceEventDetailsProps extends AgentTraceEventProps {\n  metricGroups?: AgentTraceMetricGroupProps[];\n  contents?: AgentTraceEventContent[];\n  events?: AgentTraceEventDetailsProps[];\n}\n\nexport interface AgentTracerProps extends TestIdProp {\n  primary: string;\n  secondary?: string;\n  metrics?: AgentTracePrimaryMetricItems;\n  events?: AgentTraceEventDetailsProps[];\n  onRefresh?: () => void;\n  error?: string;\n  loading?: boolean;\n}\n\nexport interface AgentTracerTreeContextProps {\n  currentNodeId?: string;\n  onSelect: (tracerEvent: AgentTraceEventDetailsProps, inputEvent?: KeyboardEvent) => void;\n  onToggle: (\n    inputEvent: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>,\n    nodeId: string\n  ) => void;\n  focusedNodeId?: string;\n  nodes: TreeNode[];\n  firstNodeId?: string;\n  changeFocusedNodeId: (nodeId: string, type: string) => void;\n}\n\nexport interface AgentTracerTreeProps extends TestIdProp {\n  events: AgentTraceEventDetailsProps[];\n  onSelect: (traceEvent: AgentTraceEventDetailsProps, keyBoardEvent?: KeyboardEvent) => void;\n  selectedNodeId?: string;\n}\n"]}

package/lib/components/AgentTracer/AgentTracerTree.d.ts

@@ -0,0 +1,4 @@
+import type { AgentTracerTreeProps } from './AgentTracer.types';
+declare const AgentTracerTree: ({ events: tracerEvents, onSelect, selectedNodeId, testId }: AgentTracerTreeProps) => import("react/jsx-runtime").JSX.Element;
+export default AgentTracerTree;
+//# sourceMappingURL=AgentTracerTree.d.ts.map

package/lib/components/AgentTracer/AgentTracerTree.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AgentTracerTree.d.ts","sourceRoot":"","sources":["../../../src/components/AgentTracer/AgentTracerTree.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAIV,oBAAoB,EACrB,MAAM,qBAAqB,CAAC;AAE7B,QAAA,MAAM,eAAe,+DAKlB,oBAAoB,4CAyGtB,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/lib/components/AgentTracer/AgentTracerTree.js

@@ -0,0 +1,82 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { StandardTree, treeHelpers } from '@pega/cosmos-react-core';
+import AgentTraceEvent from './AgentTraceEvent';
+import { StyledAgentTreeItem } from './AgentTracer.styles';
+const AgentTracerTree = ({ events: tracerEvents, onSelect, selectedNodeId, testId }) => {
+    const [nodes, setNodes] = useState([]);
+    useEffect(() => {
+        const treeNodes = tracerEvents.map(tracerEvent => ({
+            id: tracerEvent.id,
+            label: tracerEvent.primary,
+            testId: `${testId}:${tracerEvent.id}`,
+            expanded: !!treeHelpers.getNode(nodes, tracerEvent.id)?.expanded ||
+                !!tracerEvent.events?.find(event => event.id === selectedNodeId),
+            event: tracerEvent,
+            nodes: !tracerEvent.events?.length
+                ? undefined
+                : tracerEvent.events.map(childEvent => ({
+                    id: childEvent.id,
+                    label: childEvent.primary,
+                    testId: `${testId}:${childEvent.id}`,
+                    expanded: false,
+                    event: childEvent
+                }))
+        }));
+        setNodes(treeNodes);
+    }, [tracerEvents]);
+    const getEventByID = (events, id) => {
+        let found;
+        events.some(node => {
+            if (node.id === id) {
+                found = node;
+                return true;
+            }
+            if (node.events) {
+                found = getEventByID(node.events, id);
+                return !!found;
+            }
+            return false;
+        });
+        return found;
+    };
+    const tracerTreeRenderer = ({ id }) => {
+        const currentEvent = getEventByID(tracerEvents, id);
+        const metricsToDisplay = [
+            undefined,
+            undefined
+        ];
+        if (currentEvent?.metrics?.[0] && !currentEvent?.metrics?.[0].hideInListView) {
+            metricsToDisplay[0] = currentEvent?.metrics?.[0];
+        }
+        if (currentEvent?.metrics?.[1] && !currentEvent?.metrics?.[1].hideInListView) {
+            metricsToDisplay[1] = currentEvent?.metrics?.[1];
+        }
+        return (currentEvent && (_jsx(StyledAgentTreeItem, { children: _jsx(AgentTraceEvent, { ...currentEvent, metrics: metricsToDisplay, testId: testId }) })));
+    };
+    const onNodeToggle = (id) => {
+        const clickedNode = treeHelpers.getNode(nodes, id);
+        // If a leaf node, just set to current
+        if (!clickedNode?.nodes)
+            return;
+        setNodes(tree => treeHelpers.mapNode(tree, id, node => {
+            return {
+                ...node,
+                expanded: !node.expanded,
+                loading: node.nodes?.length === 0
+            };
+        }));
+    };
+    const onNodeClick = (id) => {
+        const selectedItem = treeHelpers.getNode(nodes, id);
+        if (selectedItem?.id) {
+            const selectedEvent = getEventByID(tracerEvents, selectedItem?.id);
+            if (selectedEvent) {
+                onSelect(selectedEvent);
+            }
+        }
+    };
+    return (_jsx(StandardTree, { nodes: nodes, contentRenderer: tracerTreeRenderer, onNodeToggle: onNodeToggle, onNodeClick: onNodeClick, currentNodeId: selectedNodeId }));
+};
+export default AgentTracerTree;
+//# sourceMappingURL=AgentTracerTree.js.map

package/lib/components/AgentTracer/AgentTracerTree.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AgentTracerTree.js","sourceRoot":"","sources":["../../../src/components/AgentTracer/AgentTracerTree.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useState } from 'react';\n\nimport { StandardTree, treeHelpers, type StandardTreeNode } from '@pega/cosmos-react-core';\n\nimport AgentTraceEvent from './AgentTraceEvent';\nimport { StyledAgentTreeItem } from './AgentTracer.styles';\nimport type {\n  AgentTraceEventDetailsProps,\n  AgentTracerDurationMetric,\n  AgentTracerTokenMetric,\n  AgentTracerTreeProps\n} from './AgentTracer.types';\n\nconst AgentTracerTree = ({\n  events: tracerEvents,\n  onSelect,\n  selectedNodeId,\n  testId\n}: AgentTracerTreeProps) => {\n  const [nodes, setNodes] = useState<StandardTreeNode[]>([]);\n\n  useEffect(() => {\n    const treeNodes: StandardTreeNode[] = tracerEvents.map(tracerEvent => ({\n      id: tracerEvent.id,\n      label: tracerEvent.primary,\n      testId: `${testId}:${tracerEvent.id}`,\n      expanded:\n        !!treeHelpers.getNode(nodes, tracerEvent.id)?.expanded ||\n        !!tracerEvent.events?.find(event => event.id === selectedNodeId),\n      event: tracerEvent,\n      nodes: !tracerEvent.events?.length\n        ? undefined\n        : tracerEvent.events.map(childEvent => ({\n            id: childEvent.id,\n            label: childEvent.primary,\n            testId: `${testId}:${childEvent.id}`,\n            expanded: false,\n            event: childEvent\n          }))\n    }));\n    setNodes(treeNodes);\n  }, [tracerEvents]);\n\n  const getEventByID = (\n    events: AgentTraceEventDetailsProps[],\n    id: AgentTraceEventDetailsProps['id']\n  ): AgentTraceEventDetailsProps | undefined => {\n    let found;\n    events.some(node => {\n      if (node.id === id) {\n        found = node;\n        return true;\n      }\n\n      if (node.events) {\n        found = getEventByID(node.events, id);\n        return !!found;\n      }\n\n      return false;\n    });\n\n    return found;\n  };\n\n  const tracerTreeRenderer = ({ id }: StandardTreeNode) => {\n    const currentEvent = getEventByID(tracerEvents, id);\n\n    const metricsToDisplay: [AgentTracerDurationMetric?, AgentTracerTokenMetric?] = [\n      undefined,\n      undefined\n    ];\n    if (currentEvent?.metrics?.[0] && !currentEvent?.metrics?.[0].hideInListView) {\n      metricsToDisplay[0] = currentEvent?.metrics?.[0];\n    }\n    if (currentEvent?.metrics?.[1] && !currentEvent?.metrics?.[1].hideInListView) {\n      metricsToDisplay[1] = currentEvent?.metrics?.[1];\n    }\n\n    return (\n      currentEvent && (\n        <StyledAgentTreeItem>\n          <AgentTraceEvent {...currentEvent} metrics={metricsToDisplay} testId={testId} />\n        </StyledAgentTreeItem>\n      )\n    );\n  };\n\n  const onNodeToggle = (id: StandardTreeNode['id']) => {\n    const clickedNode = treeHelpers.getNode(nodes, id);\n    // If a leaf node, just set to current\n    if (!clickedNode?.nodes) return;\n\n    setNodes(tree =>\n      treeHelpers.mapNode(tree, id, node => {\n        return {\n          ...node,\n          expanded: !node.expanded,\n          loading: node.nodes?.length === 0\n        };\n      })\n    );\n  };\n\n  const onNodeClick = (id: StandardTreeNode['id']) => {\n    const selectedItem = treeHelpers.getNode(nodes, id);\n    if (selectedItem?.id) {\n      const selectedEvent = getEventByID(tracerEvents, selectedItem?.id);\n      if (selectedEvent) {\n        onSelect(selectedEvent);\n      }\n    }\n  };\n\n  return (\n    <StandardTree\n      nodes={nodes}\n      contentRenderer={tracerTreeRenderer}\n      onNodeToggle={onNodeToggle}\n      onNodeClick={onNodeClick}\n      currentNodeId={selectedNodeId}\n    />\n  );\n};\n\nexport default AgentTracerTree;\n"]}

package/lib/components/AgentTracer/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './AgentTracer';
+export * from './AgentTracer.types';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/AgentTracer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/AgentTracer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,cAAc,qBAAqB,CAAC"}

package/lib/components/AgentTracer/index.js

@@ -0,0 +1,3 @@
+export { default } from './AgentTracer';
+export * from './AgentTracer.types';
+//# sourceMappingURL=index.js.map

package/lib/components/AgentTracer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/AgentTracer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,cAAc,qBAAqB,CAAC","sourcesContent":["export { default } from './AgentTracer';\nexport * from './AgentTracer.types';\n"]}

package/lib/components/Clipboard/Clipboard.d.ts

@@ -1,6 +1,5 @@
-import type { FunctionComponent } from 'react';
-import type { ForwardProps } from '@pega/cosmos-react-core';
+import type { ForwardRefForwardPropsComponent } from '@pega/cosmos-react-core';
 import type { ClipboardProps } from './Clipboard.types';
-declare const Clipboard: FunctionComponent<ClipboardProps & ForwardProps>;
+declare const Clipboard: ForwardRefForwardPropsComponent<ClipboardProps>;
 export default Clipboard;
 //# sourceMappingURL=Clipboard.d.ts.map

package/lib/components/Clipboard/Clipboard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Clipboard.d.ts","sourceRoot":"","sources":["../../../src/components/Clipboard/Clipboard.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAuB,MAAM,OAAO,CAAC;AAcpE,OAAO,KAAK,EAAe,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAEzE,OAAO,KAAK,EAAE,cAAc,EAA4B,MAAM,mBAAmB,CAAC;AA2DlF,QAAA,MAAM,SAAS,EAAE,iBAAiB,CAAC,cAAc,GAAG,YAAY,CAuB9D,CAAC;AACH,eAAe,SAAS,CAAC"}
+{"version":3,"file":"Clipboard.d.ts","sourceRoot":"","sources":["../../../src/components/Clipboard/Clipboard.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAe,+BAA+B,EAAE,MAAM,yBAAyB,CAAC;AAE5F,OAAO,KAAK,EAAE,cAAc,EAA4B,MAAM,mBAAmB,CAAC;AA2DlF,QAAA,MAAM,SAAS,EAAE,+BAA+B,CAAC,cAAc,CAgC7D,CAAC;AACH,eAAe,SAAS,CAAC"}

package/lib/components/Clipboard/Clipboard.js

@@ -24,7 +24,11 @@ const FieldSummary = ({ primary, secondary, fields, actions }) => {
 const Clipboard = forwardRef(function Clipboard({ navigation, content, lastUpdated }, ref) {
     const t = useI18n();
     const navContent = useMemo(() => _jsx(StandardTree, { ...navigation }), [navigation]);
-    return (_jsxs(Flex, { as: StyledContainer, container: { direction: 'column' }, ref: ref, children: [_jsxs(Flex, { as: StyledMain, container: true, children: [_jsx(StyledTreeContainer, { children: navContent }), _jsxs(Flex, { container: { direction: 'column', pad: 1, gap: 1 }, as: StyledContent, ref: ref, children: [!content && _jsx(EmptyState, {}), content && content.loading && _jsx(Progress, { placement: 'local', message: t('loading') }), content && !content.loading && _jsx(FieldSummary, { ...content })] })] }), _jsx(Flex, { as: StyledClipboardFooter, container: { alignItems: 'center' }, children: lastUpdated && _jsx(Text, { variant: 'secondary', children: lastUpdated }) })] }));
+    return (_jsxs(Flex, { as: StyledContainer, container: { direction: 'column' }, ref: ref, children: [_jsxs(Flex, { as: StyledMain, container: true, children: [_jsx(StyledTreeContainer, { children: navContent }), _jsxs(Flex, { container: { direction: 'column', pad: 1, gap: 1 }, as: StyledContent, ref: ref, children: [!content && _jsx(EmptyState, {}), content && content.loading && _jsx(Progress, { placement: 'local', message: t('loading') }), content && !content.loading && _jsx(FieldSummary, { ...content })] })] }), _jsx(Flex, { as: StyledClipboardFooter, container: { alignItems: 'center' }, children: lastUpdated && (_jsx(Text, { variant: 'secondary', children: 
+                    // FIXME-REACT-18 This should probably be using date formatter
+                    typeof lastUpdated !== 'string' && typeof lastUpdated !== 'number'
+                        ? lastUpdated.toLocaleString()
+                        : lastUpdated })) })] }));
 });
 export default Clipboard;
 //# sourceMappingURL=Clipboard.js.map

package/lib/components/Clipboard/Clipboard.js.map

@@ -1 +1 @@
-{"version":3,"file":"Clipboard.js","sourceRoot":"","sources":["../../../src/components/Clipboard/Clipboard.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAG/D,OAAO,EACL,MAAM,EACN,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,YAAY,EACZ,WAAW,EACX,IAAI,EACJ,KAAK,EACL,OAAO,EACP,UAAU,EACX,MAAM,yBAAyB,CAAC;AAIjC,OAAO,EACL,qBAAqB,EACrB,eAAe,EACf,aAAa,EACb,UAAU,EACV,WAAW,EACX,mBAAmB,EACpB,MAAM,oBAAoB,CAAC;AAE5B,MAAM,aAAa,GAAc,CAAC,IAAW,EAAE,EAAE;IAC/C,OAAO,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CACpB,KAAC,MAAM,IAAC,OAAO,EAAC,MAAM,EAAC,OAAO,EAAE,CAAC,CAAa,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC,YAC1E,IAAI,CAAC,IAAI,GACH,CACV,CAAC,CAAC,CAAC,CACF,4BAAG,IAAI,CAAC,IAAI,GAAI,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,YAAY,GAA0B,CAAC,EAC3C,OAAO,EACP,SAAS,EACT,MAAM,EACN,OAAO,EACW,EAAE,EAAE;IACtB,MAAM,UAAU,GAAG,MAAM,CAAkB,IAAI,CAAC,CAAC;IACjD,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,MAAM,aAAa,GAAG,SAAS,EAAE,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,IAAI,KAAK,KAAK,EAAE,CAAC,CAAC;IAE/E,MAAM,OAAO,GAAyB;QACpC;YACE,QAAQ,EAAE,aAAa;YACvB,KAAK,EAAE,CAAC,CAAC,+BAA+B,CAAC;SAC1C;QACD,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,CAAC,+BAA+B,CAAC,EAAE;KACjE,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,UAAU,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;IAC9B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,8BACE,KAAC,WAAW,IACV,OAAO,EACL,KAAC,WAAW,IAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,OAAO,EAAC,IAAI,EAAC,GAAG,EAAE,UAAU,YACpD,OAAO,GACI,EAEhB,SAAS,EAAE,aAAa,IAAI,KAAC,QAAQ,IAAC,KAAK,EAAE,aAAa,GAAI,EAC9D,OAAO,EAAE,OAAO,GAChB,EACF,KAAC,KAAK,IAAC,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,GAAI,IACxD,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,SAAS,GAAqD,UAAU,CAAC,SAAS,SAAS,CAC/F,EAAE,UAAU,EAAE,OAAO,EAAE,WAAW,EAAmC,EACrE,GAA0B;IAE1B,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,UAAU,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,KAAC,YAAY,OAAK,UAAU,GAAI,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjF,OAAO,CACL,MAAC,IAAI,IAAC,EAAE,EAAE,eAAe,EAAE,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,GAAG,EAAE,GAAG,aACrE,MAAC,IAAI,IAAC,EAAE,EAAE,UAAU,EAAE,SAAS,mBAC7B,KAAC,mBAAmB,cAAE,UAAU,GAAuB,EACvD,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,aAAa,EAAE,GAAG,EAAE,GAAG,aAClF,CAAC,OAAO,IAAI,KAAC,UAAU,KAAG,EAC1B,OAAO,IAAI,OAAO,CAAC,OAAO,IAAI,KAAC,QAAQ,IAAC,SAAS,EAAC,OAAO,EAAC,OAAO,EAAE,CAAC,CAAC,SAAS,CAAC,GAAI,EACnF,OAAO,IAAI,CAAC,OAAO,CAAC,OAAO,IAAI,KAAC,YAAY,OAAK,OAAO,GAAI,IACxD,IACF,EAEP,KAAC,IAAI,IAAC,EAAE,EAAE,qBAAqB,EAAE,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,YACjE,WAAW,IAAI,KAAC,IAAI,IAAC,OAAO,EAAC,WAAW,YAAE,WAAW,GAAQ,GACzD,IACF,CACR,CAAC;AACJ,CAAC,CAAC,CAAC;AACH,eAAe,SAAS,CAAC","sourcesContent":["import { forwardRef, useMemo, useEffect, useRef } from 'react';\nimport type { FunctionComponent, PropsWithoutRef, FC } from 'react';\n\nimport {\n  Button,\n  Flex,\n  MetaList,\n  Progress,\n  StandardTree,\n  SummaryItem,\n  Text,\n  Table,\n  useI18n,\n  EmptyState\n} from '@pega/cosmos-react-core';\nimport type { ColumnProps, ForwardProps } from '@pega/cosmos-react-core';\n\nimport type { ClipboardProps, FieldSummaryProps, Field } from './Clipboard.types';\nimport {\n  StyledClipboardFooter,\n  StyledContainer,\n  StyledContent,\n  StyledMain,\n  StyledTitle,\n  StyledTreeContainer\n} from './Clipboard.styles';\n\nconst FieldRenderer: FC<Field> = (cell: Field) => {\n  return cell.onClick ? (\n    <Button variant='link' onClick={(e: MouseEvent) => cell.onClick?.(cell.id, e)}>\n      {cell.name}\n    </Button>\n  ) : (\n    <>{cell.name}</>\n  );\n};\n\nconst FieldSummary: FC<FieldSummaryProps> = ({\n  primary,\n  secondary,\n  fields,\n  actions\n}: FieldSummaryProps) => {\n  const headingRef = useRef<HTMLSpanElement>(null);\n  const t = useI18n();\n\n  const metaListItems = secondary?.map(({ name, value }) => `${name}: ${value}`);\n\n  const columns: ColumnProps<Field>[] = [\n    {\n      renderer: FieldRenderer,\n      label: t('condition_builder_field_label')\n    },\n    { renderer: 'value', label: t('condition_builder_value_label') }\n  ];\n\n  useEffect(() => {\n    headingRef.current?.focus();\n  }, []);\n\n  return (\n    <>\n      <SummaryItem\n        primary={\n          <StyledTitle tabIndex={-1} variant='h3' ref={headingRef}>\n            {primary}\n          </StyledTitle>\n        }\n        secondary={metaListItems && <MetaList items={metaListItems} />}\n        actions={actions}\n      />\n      <Table title={primary} columns={columns} data={fields} />\n    </>\n  );\n};\n\nconst Clipboard: FunctionComponent<ClipboardProps & ForwardProps> = forwardRef(function Clipboard(\n  { navigation, content, lastUpdated }: PropsWithoutRef<ClipboardProps>,\n  ref: ClipboardProps['ref']\n) {\n  const t = useI18n();\n  const navContent = useMemo(() => <StandardTree {...navigation} />, [navigation]);\n\n  return (\n    <Flex as={StyledContainer} container={{ direction: 'column' }} ref={ref}>\n      <Flex as={StyledMain} container>\n        <StyledTreeContainer>{navContent}</StyledTreeContainer>\n        <Flex container={{ direction: 'column', pad: 1, gap: 1 }} as={StyledContent} ref={ref}>\n          {!content && <EmptyState />}\n          {content && content.loading && <Progress placement='local' message={t('loading')} />}\n          {content && !content.loading && <FieldSummary {...content} />}\n        </Flex>\n      </Flex>\n\n      <Flex as={StyledClipboardFooter} container={{ alignItems: 'center' }}>\n        {lastUpdated && <Text variant='secondary'>{lastUpdated}</Text>}\n      </Flex>\n    </Flex>\n  );\n});\nexport default Clipboard;\n"]}
+{"version":3,"file":"Clipboard.js","sourceRoot":"","sources":["../../../src/components/Clipboard/Clipboard.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useMemo, useEffect, useRef } from 'react';\nimport type { PropsWithoutRef, FC } from 'react';\n\nimport {\n  Button,\n  Flex,\n  MetaList,\n  Progress,\n  StandardTree,\n  SummaryItem,\n  Text,\n  Table,\n  useI18n,\n  EmptyState\n} from '@pega/cosmos-react-core';\nimport type { ColumnProps, ForwardRefForwardPropsComponent } from '@pega/cosmos-react-core';\n\nimport type { ClipboardProps, FieldSummaryProps, Field } from './Clipboard.types';\nimport {\n  StyledClipboardFooter,\n  StyledContainer,\n  StyledContent,\n  StyledMain,\n  StyledTitle,\n  StyledTreeContainer\n} from './Clipboard.styles';\n\nconst FieldRenderer: FC<Field> = (cell: Field) => {\n  return cell.onClick ? (\n    <Button variant='link' onClick={(e: MouseEvent) => cell.onClick?.(cell.id, e)}>\n      {cell.name}\n    </Button>\n  ) : (\n    <>{cell.name}</>\n  );\n};\n\nconst FieldSummary: FC<FieldSummaryProps> = ({\n  primary,\n  secondary,\n  fields,\n  actions\n}: FieldSummaryProps) => {\n  const headingRef = useRef<HTMLSpanElement>(null);\n  const t = useI18n();\n\n  const metaListItems = secondary?.map(({ name, value }) => `${name}: ${value}`);\n\n  const columns: ColumnProps<Field>[] = [\n    {\n      renderer: FieldRenderer,\n      label: t('condition_builder_field_label')\n    },\n    { renderer: 'value', label: t('condition_builder_value_label') }\n  ];\n\n  useEffect(() => {\n    headingRef.current?.focus();\n  }, []);\n\n  return (\n    <>\n      <SummaryItem\n        primary={\n          <StyledTitle tabIndex={-1} variant='h3' ref={headingRef}>\n            {primary}\n          </StyledTitle>\n        }\n        secondary={metaListItems && <MetaList items={metaListItems} />}\n        actions={actions}\n      />\n      <Table title={primary} columns={columns} data={fields} />\n    </>\n  );\n};\n\nconst Clipboard: ForwardRefForwardPropsComponent<ClipboardProps> = forwardRef(function Clipboard(\n  { navigation, content, lastUpdated }: PropsWithoutRef<ClipboardProps>,\n  ref: ClipboardProps['ref']\n) {\n  const t = useI18n();\n  const navContent = useMemo(() => <StandardTree {...navigation} />, [navigation]);\n\n  return (\n    <Flex as={StyledContainer} container={{ direction: 'column' }} ref={ref}>\n      <Flex as={StyledMain} container>\n        <StyledTreeContainer>{navContent}</StyledTreeContainer>\n        <Flex container={{ direction: 'column', pad: 1, gap: 1 }} as={StyledContent} ref={ref}>\n          {!content && <EmptyState />}\n          {content && content.loading && <Progress placement='local' message={t('loading')} />}\n          {content && !content.loading && <FieldSummary {...content} />}\n        </Flex>\n      </Flex>\n\n      <Flex as={StyledClipboardFooter} container={{ alignItems: 'center' }}>\n        {lastUpdated && (\n          <Text variant='secondary'>\n            {\n              // FIXME-REACT-18 This should probably be using date formatter\n              typeof lastUpdated !== 'string' && typeof lastUpdated !== 'number'\n                ? lastUpdated.toLocaleString()\n                : lastUpdated\n            }\n          </Text>\n        )}\n      </Flex>\n    </Flex>\n  );\n});\nexport default Clipboard;\n"]}

package/lib/components/Clipboard/Clipboard.styles.d.ts

@@ -2,6 +2,6 @@ export declare const StyledContainer: import("styled-components").StyledComponen
 export declare const StyledTreeContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledMain: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledClipboardFooter: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledTitle: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").TextProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledTitle: import("styled-components").StyledComponent<import("@pega/cosmos-react-core").ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core").TextProps>, import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 //# sourceMappingURL=Clipboard.styles.d.ts.map

package/lib/components/Clipboard/Clipboard.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Clipboard.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Clipboard/Clipboard.styles.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,eAAe,yGAE3B,CAAC;AAEF,eAAO,MAAM,mBAAmB,yGAc/B,CAAC;AAIF,eAAO,MAAM,UAAU,yGAgBtB,CAAC;AAIF,eAAO,MAAM,qBAAqB,yGAgBjC,CAAC;AAIF,eAAO,MAAM,WAAW,mOAIvB,CAAC;AAEF,eAAO,MAAM,aAAa,yGAgBxB,CAAC"}
+{"version":3,"file":"Clipboard.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Clipboard/Clipboard.styles.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,eAAe,yGAE3B,CAAC;AAEF,eAAO,MAAM,mBAAmB,yGAc/B,CAAC;AAIF,eAAO,MAAM,UAAU,yGAgBtB,CAAC;AAIF,eAAO,MAAM,qBAAqB,yGAgBjC,CAAC;AAIF,eAAO,MAAM,WAAW,kNAIvB,CAAC;AAEF,eAAO,MAAM,aAAa,yGAgBxB,CAAC"}

package/lib/components/PreviewShell/Header.d.ts

@@ -1,6 +1,5 @@
-import type { FC } from 'react';
-import type { ForwardProps } from '@pega/cosmos-react-core';
+import type { ForwardRefForwardPropsComponent } from '@pega/cosmos-react-core';
 import type { HeaderProps } from './PreviewShell.types';
-declare const Header: FC<HeaderProps & ForwardProps>;
+declare const Header: ForwardRefForwardPropsComponent<HeaderProps>;
 export default Header;
 //# sourceMappingURL=Header.d.ts.map

package/lib/components/PreviewShell/Header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../src/components/PreviewShell/Header.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAmB,MAAM,OAAO,CAAC;AAGjD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAI5D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAExD,QAAA,MAAM,MAAM,EAAE,EAAE,CAAC,WAAW,GAAG,YAAY,CA8CzC,CAAC;AAEH,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../src/components/PreviewShell/Header.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,yBAAyB,CAAC;AAI/E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAExD,QAAA,MAAM,MAAM,EAAE,+BAA+B,CAAC,WAAW,CA+CvD,CAAC;AAEH,eAAe,MAAM,CAAC"}

package/lib/components/PreviewShell/Header.js

@@ -9,7 +9,7 @@ const Header = forwardRef(function Header({ appName, onClick, href, status, oper
                             mode: 'single-select',
                             items: channels,
                             onItemClick: onChannelClick
-                        } }))] }), _jsx(Operator, { as: StyledOperator, actions: operator.actions, popover: { placement: 'bottom-start' }, children: _jsx(Avatar, { ...operator.avatar }) })] }));
+                        } }))] }), _jsx(Operator, { as: StyledOperator, actions: operator.actions, popover: { placement: 'bottom-start' }, name: operator.name, children: _jsx(Avatar, { ...operator.avatar }) })] }));
 });
 export default Header;
 //# sourceMappingURL=Header.js.map

package/lib/components/PreviewShell/Header.js.map

@@ -1 +1 @@
-{"version":3,"file":"Header.js","sourceRoot":"","sources":["../../../src/components/PreviewShell/Header.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAGnC,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAEjF,OAAO,QAAQ,MAAM,0DAA0D,CAAC;AAEhF,OAAO,EAAE,YAAY,EAAE,gBAAgB,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAGpG,MAAM,MAAM,GAAmC,UAAU,CAAC,SAAS,MAAM,CACvE,EACE,OAAO,EACP,OAAO,EACP,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,cAAc,EACe,EAC/B,GAAuB;IAEvB,MAAM,eAAe,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,QAAQ,CAAC,CAAC,CAAC,CAAC;IACxE,OAAO,CACL,MAAC,IAAI,IAAC,EAAE,EAAE,YAAY,EAAE,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,GAAG,EAAE,GAAG,aACvF,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aAC/C,KAAC,WAAW,IACV,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EACV,WAAW,EAAE,OAAO,IAAI,IAAI,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,IAAI,YAErD,OAAO,GACI,EACb,MAAM,IAAI,KAAC,MAAM,IAAC,OAAO,EAAE,MAAM,CAAC,OAAO,YAAG,MAAM,CAAC,QAAQ,GAAU,EACrE,QAAQ,IAAI,CACX,KAAC,UAAU,IACT,IAAI,EAAE,eAAe,CAAC,OAAO,EAC7B,IAAI,EAAE,eAAe,CAAC,IAAI,EAC1B,QAAQ,QACR,IAAI,EAAE;4BACJ,IAAI,EAAE,eAAe;4BACrB,KAAK,EAAE,QAAQ;4BACf,WAAW,EAAE,cAAc;yBAC5B,GACD,CACH,IACI,EACP,KAAC,QAAQ,IACP,EAAE,EAAE,cAAc,EAClB,OAAO,EAAE,QAAQ,CAAC,OAAO,EACzB,OAAO,EAAE,EAAE,SAAS,EAAE,cAAc,EAAE,YAEtC,KAAC,MAAM,OAAK,QAAQ,CAAC,MAAM,GAAI,GACtB,IACN,CACR,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,MAAM,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { FC, PropsWithoutRef } from 'react';\n\nimport { Flex, Status, Avatar, Text, MenuButton } from '@pega/cosmos-react-core';\nimport type { ForwardProps } from '@pega/cosmos-react-core';\nimport Operator from '@pega/cosmos-react-core/lib/components/AppShell/Operator';\n\nimport { StyledHeader, StyledBareButton, StyledOperator, StyledTitle } from './PreviewShell.styles';\nimport type { HeaderProps } from './PreviewShell.types';\n\nconst Header: FC<HeaderProps & ForwardProps> = forwardRef(function Header(\n  {\n    appName,\n    onClick,\n    href,\n    status,\n    operator,\n    channels,\n    onChannelClick\n  }: PropsWithoutRef<HeaderProps>,\n  ref: HeaderProps['ref']\n) {\n  const selectedChannel = channels.find(ch => ch.selected) ?? channels[0];\n  return (\n    <Flex as={StyledHeader} container={{ justify: 'between', alignItems: 'center' }} ref={ref}>\n      <Flex container={{ alignItems: 'center', gap: 1 }}>\n        <StyledTitle\n          onClick={onClick}\n          href={href}\n          forwardedAs={onClick || href ? StyledBareButton : Text}\n        >\n          {appName}\n        </StyledTitle>\n        {status && <Status variant={status.variant}>{status.children}</Status>}\n        {channels && (\n          <MenuButton\n            text={selectedChannel.primary}\n            icon={selectedChannel.icon}\n            showIcon\n            menu={{\n              mode: 'single-select',\n              items: channels,\n              onItemClick: onChannelClick\n            }}\n          />\n        )}\n      </Flex>\n      <Operator\n        as={StyledOperator}\n        actions={operator.actions}\n        popover={{ placement: 'bottom-start' }}\n      >\n        <Avatar {...operator.avatar} />\n      </Operator>\n    </Flex>\n  );\n});\n\nexport default Header;\n"]}
+{"version":3,"file":"Header.js","sourceRoot":"","sources":["../../../src/components/PreviewShell/Header.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAGnC,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAEjF,OAAO,QAAQ,MAAM,0DAA0D,CAAC;AAEhF,OAAO,EAAE,YAAY,EAAE,gBAAgB,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAGpG,MAAM,MAAM,GAAiD,UAAU,CAAC,SAAS,MAAM,CACrF,EACE,OAAO,EACP,OAAO,EACP,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,cAAc,EACe,EAC/B,GAAuB;IAEvB,MAAM,eAAe,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,QAAQ,CAAC,CAAC,CAAC,CAAC;IACxE,OAAO,CACL,MAAC,IAAI,IAAC,EAAE,EAAE,YAAY,EAAE,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,GAAG,EAAE,GAAG,aACvF,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aAC/C,KAAC,WAAW,IACV,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EACV,WAAW,EAAE,OAAO,IAAI,IAAI,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,IAAI,YAErD,OAAO,GACI,EACb,MAAM,IAAI,KAAC,MAAM,IAAC,OAAO,EAAE,MAAM,CAAC,OAAO,YAAG,MAAM,CAAC,QAAQ,GAAU,EACrE,QAAQ,IAAI,CACX,KAAC,UAAU,IACT,IAAI,EAAE,eAAe,CAAC,OAAO,EAC7B,IAAI,EAAE,eAAe,CAAC,IAAI,EAC1B,QAAQ,QACR,IAAI,EAAE;4BACJ,IAAI,EAAE,eAAe;4BACrB,KAAK,EAAE,QAAQ;4BACf,WAAW,EAAE,cAAc;yBAC5B,GACD,CACH,IACI,EACP,KAAC,QAAQ,IACP,EAAE,EAAE,cAAc,EAClB,OAAO,EAAE,QAAQ,CAAC,OAAO,EACzB,OAAO,EAAE,EAAE,SAAS,EAAE,cAAc,EAAE,EACtC,IAAI,EAAE,QAAQ,CAAC,IAAI,YAEnB,KAAC,MAAM,OAAK,QAAQ,CAAC,MAAM,GAAI,GACtB,IACN,CACR,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,MAAM,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef } from 'react';\n\nimport { Flex, Status, Avatar, Text, MenuButton } from '@pega/cosmos-react-core';\nimport type { ForwardRefForwardPropsComponent } from '@pega/cosmos-react-core';\nimport Operator from '@pega/cosmos-react-core/lib/components/AppShell/Operator';\n\nimport { StyledHeader, StyledBareButton, StyledOperator, StyledTitle } from './PreviewShell.styles';\nimport type { HeaderProps } from './PreviewShell.types';\n\nconst Header: ForwardRefForwardPropsComponent<HeaderProps> = forwardRef(function Header(\n  {\n    appName,\n    onClick,\n    href,\n    status,\n    operator,\n    channels,\n    onChannelClick\n  }: PropsWithoutRef<HeaderProps>,\n  ref: HeaderProps['ref']\n) {\n  const selectedChannel = channels.find(ch => ch.selected) ?? channels[0];\n  return (\n    <Flex as={StyledHeader} container={{ justify: 'between', alignItems: 'center' }} ref={ref}>\n      <Flex container={{ alignItems: 'center', gap: 1 }}>\n        <StyledTitle\n          onClick={onClick}\n          href={href}\n          forwardedAs={onClick || href ? StyledBareButton : Text}\n        >\n          {appName}\n        </StyledTitle>\n        {status && <Status variant={status.variant}>{status.children}</Status>}\n        {channels && (\n          <MenuButton\n            text={selectedChannel.primary}\n            icon={selectedChannel.icon}\n            showIcon\n            menu={{\n              mode: 'single-select',\n              items: channels,\n              onItemClick: onChannelClick\n            }}\n          />\n        )}\n      </Flex>\n      <Operator\n        as={StyledOperator}\n        actions={operator.actions}\n        popover={{ placement: 'bottom-start' }}\n        name={operator.name}\n      >\n        <Avatar {...operator.avatar} />\n      </Operator>\n    </Flex>\n  );\n});\n\nexport default Header;\n"]}

package/lib/components/PreviewShell/PreviewShell.d.ts

@@ -1,6 +1,5 @@
-import type { FunctionComponent } from 'react';
-import type { ForwardProps } from '@pega/cosmos-react-core';
+import type { ForwardRefForwardPropsComponent } from '@pega/cosmos-react-core';
 import type { PreviewShellProps } from './PreviewShell.types';
-declare const PreviewShell: FunctionComponent<PreviewShellProps & ForwardProps>;
+declare const PreviewShell: ForwardRefForwardPropsComponent<PreviewShellProps>;
 export default PreviewShell;
 //# sourceMappingURL=PreviewShell.d.ts.map

package/lib/components/PreviewShell/PreviewShell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PreviewShell.d.ts","sourceRoot":"","sources":["../../../src/components/PreviewShell/PreviewShell.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAGhE,OAAO,KAAK,EAAE,YAAY,EAAkB,MAAM,yBAAyB,CAAC;AAI5E,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAI9D,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,GAAG,YAAY,CA+DrE,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"PreviewShell.d.ts","sourceRoot":"","sources":["../../../src/components/PreviewShell/PreviewShell.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,+BAA+B,EAAkB,MAAM,yBAAyB,CAAC;AAI/F,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAI9D,QAAA,MAAM,YAAY,EAAE,+BAA+B,CAAC,iBAAiB,CA+DpE,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/components/PreviewShell/PreviewShell.js.map

@@ -1 +1 @@
-{"version":3,"file":"PreviewShell.js","sourceRoot":"","sources":["../../../src/components/PreviewShell/PreviewShell.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGjE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAG7E,OAAO,EAAE,UAAU,EAAE,sBAAsB,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AACzF,OAAO,MAAM,MAAM,UAAU,CAAC;AAE9B,OAAO,mBAAmB,MAAM,uBAAuB,CAAC;AACxD,OAAO,MAAM,MAAM,UAAU,CAAC;AAE9B,MAAM,YAAY,GAAwD,UAAU,CAClF,SAAS,YAAY,CACnB,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAsC,EAChE,GAA6B;IAE7B,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;IAC7D,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,SAAS,CAAC,GAAG,EAAE;QACb,WAAW,CAAC,CAAC,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;IAClC,CAAC,EAAE,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEvB,MAAM,SAAS,GAA4B,OAAO,CAAC,GAAG,EAAE;QACtD,MAAM,cAAc,GAAG;YACrB;gBACE,KAAK,EAAE,CAAC,CAAC,oBAAoB,CAAC;gBAC9B,MAAM,EAAE;oBACN,SAAS,EAAE,CAAC,CAAC,cAAc,CAAC;oBAC5B,QAAQ,EAAE,MAAM;iBACjB;aACF;SACF,CAAC;QAEF,IAAI,MAAM,EAAE,CAAC;YACX,cAAc,CAAC,IAAI,CAAC;gBAClB,KAAK,EAAE,CAAC,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC;gBACxC,MAAM,EAAE;oBACN,SAAS,EAAE,CAAC,CAAC,WAAW,CAAC;oBACzB,QAAQ,EAAE,QAAQ;iBACnB;aACF,CAAC,CAAC;QACL,CAAC;QACD,OAAO,cAAc,CAAC;IACxB,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC;IAE1B,OAAO,CACL,MAAC,mBAAmB,CAAC,QAAQ,IAC3B,KAAK,EAAE,OAAO,CACZ,GAAG,EAAE,CAAC,CAAC;YACL,cAAc,EAAE,QAAQ;YACxB,YAAY,EAAE,WAAW;SAC1B,CAAC,EACF,CAAC,QAAQ,CAAC,CACX,aAED,KAAC,SAAS,IAAC,KAAK,EAAE,SAAS,GAAI,EAC9B,MAAM,IAAI,KAAC,MAAM,OAAK,MAAM,GAAI,EACjC,KAAC,UAAU,IAAC,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC,MAAM,YACtD,KAAC,sBAAsB,IAAC,QAAQ,EAAE,CAAC,gBAAc,CAAC,CAAC,eAAe,CAAC,YAChE,QAAQ,GACc,GACd,EACb,KAAC,cAAc,IACb,EAAE,EAAE,YAAY,EAChB,GAAG,EAAE,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,EAC/B,GAAG,EAAC,MAAM,EACV,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,YAEnC,MAAM,IAAI,KAAC,MAAM,OAAK,MAAM,GAAI,GAClB,IACY,CAChC,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { forwardRef, useEffect, useMemo, useState } from 'react';\nimport type { PropsWithoutRef, FunctionComponent } from 'react';\n\nimport { useI18n, SkipLinks, ExpandCollapse } from '@pega/cosmos-react-core';\nimport type { ForwardProps, SkipLinksProps } from '@pega/cosmos-react-core';\n\nimport { StyledMain, StyledPreviewContainer, StyledFooter } from './PreviewShell.styles';\nimport Header from './Header';\nimport type { PreviewShellProps } from './PreviewShell.types';\nimport PreviewShellContext from './PreviewShellContext';\nimport Footer from './Footer';\n\nconst PreviewShell: FunctionComponent<PreviewShellProps & ForwardProps> = forwardRef(\n  function PreviewShell(\n    { header, children, footer }: PropsWithoutRef<PreviewShellProps>,\n    ref: PreviewShellProps['ref']\n  ) {\n    const [expanded, setExpanded] = useState(!!footer?.expanded);\n    const t = useI18n();\n\n    useEffect(() => {\n      setExpanded(!!footer?.expanded);\n    }, [footer?.expanded]);\n\n    const skipLinks: SkipLinksProps['items'] = useMemo(() => {\n      const skipLinksItems = [\n        {\n          label: t('go_to_main_content'),\n          target: {\n            ariaLabel: t('main_content'),\n            selector: 'main'\n          }\n        }\n      ];\n\n      if (footer) {\n        skipLinksItems.push({\n          label: t('go_to_noun', [t('dev_tools')]),\n          target: {\n            ariaLabel: t('dev_tools'),\n            selector: 'footer'\n          }\n        });\n      }\n      return skipLinksItems;\n    }, [t, header?.channels]);\n\n    return (\n      <PreviewShellContext.Provider\n        value={useMemo(\n          () => ({\n            footerExpanded: expanded,\n            toggleFooter: setExpanded\n          }),\n          [expanded]\n        )}\n      >\n        <SkipLinks items={skipLinks} />\n        {header && <Header {...header} />}\n        <StyledMain ref={ref} footer={!!footer} header={!!header}>\n          <StyledPreviewContainer tabIndex={0} aria-label={t('preview_frame')}>\n            {children}\n          </StyledPreviewContainer>\n        </StyledMain>\n        <ExpandCollapse\n          as={StyledFooter}\n          min={footer ? '2.5rem' : '0rem'}\n          max='50vh'\n          collapsed={footer ? !expanded : true}\n        >\n          {footer && <Footer {...footer} />}\n        </ExpandCollapse>\n      </PreviewShellContext.Provider>\n    );\n  }\n);\n\nexport default PreviewShell;\n"]}
+{"version":3,"file":"PreviewShell.js","sourceRoot":"","sources":["../../../src/components/PreviewShell/PreviewShell.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGjE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAG7E,OAAO,EAAE,UAAU,EAAE,sBAAsB,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AACzF,OAAO,MAAM,MAAM,UAAU,CAAC;AAE9B,OAAO,mBAAmB,MAAM,uBAAuB,CAAC;AACxD,OAAO,MAAM,MAAM,UAAU,CAAC;AAE9B,MAAM,YAAY,GAAuD,UAAU,CACjF,SAAS,YAAY,CACnB,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAsC,EAChE,GAA6B;IAE7B,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;IAC7D,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,SAAS,CAAC,GAAG,EAAE;QACb,WAAW,CAAC,CAAC,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;IAClC,CAAC,EAAE,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEvB,MAAM,SAAS,GAA4B,OAAO,CAAC,GAAG,EAAE;QACtD,MAAM,cAAc,GAAG;YACrB;gBACE,KAAK,EAAE,CAAC,CAAC,oBAAoB,CAAC;gBAC9B,MAAM,EAAE;oBACN,SAAS,EAAE,CAAC,CAAC,cAAc,CAAC;oBAC5B,QAAQ,EAAE,MAAM;iBACjB;aACF;SACF,CAAC;QAEF,IAAI,MAAM,EAAE,CAAC;YACX,cAAc,CAAC,IAAI,CAAC;gBAClB,KAAK,EAAE,CAAC,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC;gBACxC,MAAM,EAAE;oBACN,SAAS,EAAE,CAAC,CAAC,WAAW,CAAC;oBACzB,QAAQ,EAAE,QAAQ;iBACnB;aACF,CAAC,CAAC;QACL,CAAC;QACD,OAAO,cAAc,CAAC;IACxB,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC;IAE1B,OAAO,CACL,MAAC,mBAAmB,CAAC,QAAQ,IAC3B,KAAK,EAAE,OAAO,CACZ,GAAG,EAAE,CAAC,CAAC;YACL,cAAc,EAAE,QAAQ;YACxB,YAAY,EAAE,WAAW;SAC1B,CAAC,EACF,CAAC,QAAQ,CAAC,CACX,aAED,KAAC,SAAS,IAAC,KAAK,EAAE,SAAS,GAAI,EAC9B,MAAM,IAAI,KAAC,MAAM,OAAK,MAAM,GAAI,EACjC,KAAC,UAAU,IAAC,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC,MAAM,YACtD,KAAC,sBAAsB,IAAC,QAAQ,EAAE,CAAC,gBAAc,CAAC,CAAC,eAAe,CAAC,YAChE,QAAQ,GACc,GACd,EACb,KAAC,cAAc,IACb,EAAE,EAAE,YAAY,EAChB,GAAG,EAAE,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,EAC/B,GAAG,EAAC,MAAM,EACV,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,YAEnC,MAAM,IAAI,KAAC,MAAM,OAAK,MAAM,GAAI,GAClB,IACY,CAChC,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { forwardRef, useEffect, useMemo, useState } from 'react';\nimport type { PropsWithoutRef } from 'react';\n\nimport { useI18n, SkipLinks, ExpandCollapse } from '@pega/cosmos-react-core';\nimport type { ForwardRefForwardPropsComponent, SkipLinksProps } from '@pega/cosmos-react-core';\n\nimport { StyledMain, StyledPreviewContainer, StyledFooter } from './PreviewShell.styles';\nimport Header from './Header';\nimport type { PreviewShellProps } from './PreviewShell.types';\nimport PreviewShellContext from './PreviewShellContext';\nimport Footer from './Footer';\n\nconst PreviewShell: ForwardRefForwardPropsComponent<PreviewShellProps> = forwardRef(\n  function PreviewShell(\n    { header, children, footer }: PropsWithoutRef<PreviewShellProps>,\n    ref: PreviewShellProps['ref']\n  ) {\n    const [expanded, setExpanded] = useState(!!footer?.expanded);\n    const t = useI18n();\n\n    useEffect(() => {\n      setExpanded(!!footer?.expanded);\n    }, [footer?.expanded]);\n\n    const skipLinks: SkipLinksProps['items'] = useMemo(() => {\n      const skipLinksItems = [\n        {\n          label: t('go_to_main_content'),\n          target: {\n            ariaLabel: t('main_content'),\n            selector: 'main'\n          }\n        }\n      ];\n\n      if (footer) {\n        skipLinksItems.push({\n          label: t('go_to_noun', [t('dev_tools')]),\n          target: {\n            ariaLabel: t('dev_tools'),\n            selector: 'footer'\n          }\n        });\n      }\n      return skipLinksItems;\n    }, [t, header?.channels]);\n\n    return (\n      <PreviewShellContext.Provider\n        value={useMemo(\n          () => ({\n            footerExpanded: expanded,\n            toggleFooter: setExpanded\n          }),\n          [expanded]\n        )}\n      >\n        <SkipLinks items={skipLinks} />\n        {header && <Header {...header} />}\n        <StyledMain ref={ref} footer={!!footer} header={!!header}>\n          <StyledPreviewContainer tabIndex={0} aria-label={t('preview_frame')}>\n            {children}\n          </StyledPreviewContainer>\n        </StyledMain>\n        <ExpandCollapse\n          as={StyledFooter}\n          min={footer ? '2.5rem' : '0rem'}\n          max='50vh'\n          collapsed={footer ? !expanded : true}\n        >\n          {footer && <Footer {...footer} />}\n        </ExpandCollapse>\n      </PreviewShellContext.Provider>\n    );\n  }\n);\n\nexport default PreviewShell;\n"]}

package/lib/components/PreviewShell/PreviewShell.styles.d.ts

@@ -1,7 +1,7 @@
 import { Text } from '@pega/cosmos-react-core';
 export declare const StyledHeader: import("styled-components").StyledComponent<"header", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledTitle: typeof Text;
-export declare const StyledBareButton: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core/lib/components/Button/BareButton").BareButtonProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledBareButton: import("styled-components").StyledComponent<import("@pega/cosmos-react-core").ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core/lib/components/Button/BareButton").BareButtonProps>, import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledOperator: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledMain: import("styled-components").StyledComponent<"main", import("styled-components").DefaultTheme, {
     header: boolean;

package/lib/components/PreviewShell/PreviewShell.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PreviewShell.styles.d.ts","sourceRoot":"","sources":["../../../src/components/PreviewShell/PreviewShell.styles.ts"],"names":[],"mappings":"AAGA,OAAO,EAAoB,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAQjE,eAAO,MAAM,YAAY,4GAOvB,CAAC;AAIH,eAAO,MAAM,WAAW,EAAE,OAAO,IAS/B,CAAC;AAIH,eAAO,MAAM,gBAAgB,0QAM3B,CAAC;AAIH,eAAO,MAAM,cAAc,4GAQ1B,CAAC;AAIF,eAAO,MAAM,UAAU;YAAyB,OAAO;YAAU,OAAO;SAkBvE,CAAC;AAIF,eAAO,MAAM,sBAAsB,yGAejC,CAAC;AAIH,eAAO,MAAM,YAAY,4GAIvB,CAAC;AAIH,eAAO,MAAM,mBAAmB,yGAG/B,CAAC"}
+{"version":3,"file":"PreviewShell.styles.d.ts","sourceRoot":"","sources":["../../../src/components/PreviewShell/PreviewShell.styles.ts"],"names":[],"mappings":"AAGA,OAAO,EAAoB,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAQjE,eAAO,MAAM,YAAY,4GAOvB,CAAC;AAIH,eAAO,MAAM,WAAW,EAAE,OAAO,IAS/B,CAAC;AAIH,eAAO,MAAM,gBAAgB,yPAM3B,CAAC;AAIH,eAAO,MAAM,cAAc,4GAQ1B,CAAC;AAIF,eAAO,MAAM,UAAU;YAAyB,OAAO;YAAU,OAAO;SAkBvE,CAAC;AAIF,eAAO,MAAM,sBAAsB,yGAejC,CAAC;AAIH,eAAO,MAAM,YAAY,4GAIvB,CAAC;AAIH,eAAO,MAAM,mBAAmB,yGAG/B,CAAC"}

package/lib/index.d.ts

@@ -1,3 +1,5 @@
+export { default as AgentTracer } from './components/AgentTracer';
+export * from './components/AgentTracer';
 export { default as Clipboard } from './components/Clipboard';
 export * from './components/Clipboard';
 export { default as DevTools } from './components/DevTools';

package/lib/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,cAAc,wBAAwB,CAAC;AACvC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,cAAc,uBAAuB,CAAC;AACtC,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACpE,cAAc,2BAA2B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAClE,cAAc,0BAA0B,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,cAAc,wBAAwB,CAAC;AACvC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,cAAc,uBAAuB,CAAC;AACtC,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACpE,cAAc,2BAA2B,CAAC"}

package/lib/index.js

@@ -1,4 +1,6 @@
 // This file is autogenerated. Any changes will be overwritten.
+export { default as AgentTracer } from './components/AgentTracer';
+export * from './components/AgentTracer';
 export { default as Clipboard } from './components/Clipboard';
 export * from './components/Clipboard';
 export { default as DevTools } from './components/DevTools';

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,+DAA+D;AAC/D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,cAAc,wBAAwB,CAAC;AACvC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,cAAc,uBAAuB,CAAC;AACtC,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACpE,cAAc,2BAA2B,CAAC","sourcesContent":["// This file is autogenerated. Any changes will be overwritten.\nexport { default as Clipboard } from './components/Clipboard';\nexport * from './components/Clipboard';\nexport { default as DevTools } from './components/DevTools';\nexport * from './components/DevTools';\nexport { default as PreviewShell } from './components/PreviewShell';\nexport * from './components/PreviewShell';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,+DAA+D;AAC/D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAClE,cAAc,0BAA0B,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,cAAc,wBAAwB,CAAC;AACvC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,cAAc,uBAAuB,CAAC;AACtC,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACpE,cAAc,2BAA2B,CAAC","sourcesContent":["// This file is autogenerated. Any changes will be overwritten.\nexport { default as AgentTracer } from './components/AgentTracer';\nexport * from './components/AgentTracer';\nexport { default as Clipboard } from './components/Clipboard';\nexport * from './components/Clipboard';\nexport { default as DevTools } from './components/DevTools';\nexport * from './components/DevTools';\nexport { default as PreviewShell } from './components/PreviewShell';\nexport * from './components/PreviewShell';\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/cosmos-react-tools",
-  "version": "8.0.0-build.9.1",
+  "version": "8.0.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/pegasystems/cosmos-react.git",
@@ -19,16 +19,20 @@
     "build": "tsc -b tsconfig.build.json"
   },
   "dependencies": {
-    "@pega/cosmos-react-core": "8.0.0-build.9.1",
-    "@types/react": "^17.0.62",
-    "@types/react-dom": "^17.0.20",
+    "@pega/cosmos-react-core": "8.0.0",
+    "@types/react": "^17.0.62 || ^18.3.3",
+    "@types/react-dom": "^17.0.20 || ^18.3.0",
     "@types/styled-components": "^5.1.26",
     "polished": "^4.1.0",
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0",
+    "react": "^17.0.0 || ^18.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0",
     "styled-components": "^5.2.0"
   },
   "devDependencies": {
+    "@storybook/addon-actions": "~8.2.9",
+    "@storybook/react": "~8.2.9",
+    "@testing-library/react": "^16.0.0",
+    "@testing-library/user-event": "^14.6.1",
     "typescript": "~5.5.4"
   }
 }