@dbcdk/react-components 0.0.14 → 0.0.16

package/dist/components/accordion/Accordion.d.ts

@@ -2,6 +2,7 @@ import type { JSX, ReactNode } from 'react';
 import type { Severity } from '../../constants/severity.types';
 export interface AccordionItem {
     header: string;
+    headerAddition?: ReactNode;
     headerIcon?: ReactNode;
     severity?: Severity;
     children: ReactNode;
@@ -15,7 +16,7 @@ export interface AccordionProps {
     size?: Size;
     /** Uncontrolled defaults */
     defaultOpenIndex?: number | null;
-    defaultOpenIndexes?: number[];
+    defaultOpenIndexes?: number[] | 'all';
     /** Controlled state */
     openIndex?: number | null;
     openIndexes?: number[];

package/dist/components/accordion/Accordion.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useId, useMemo, useState } from 'react';
+import { useEffect, useId, useMemo, useRef, useState } from 'react';
 import styles from './Accordion.module.css';
 import { AccordionRow } from './components/AccordionRow';
 function uniqSorted(nums) {
@@ -12,8 +12,19 @@ function normalizeMultiple(indexes) {
 export function Accordion({ items, mode = 'single', size = 'md', defaultOpenIndex = null, defaultOpenIndexes = [], openIndex, openIndexes, onOpenIndexChange, onOpenIndexesChange, }) {
     const uid = useId();
     const isControlled = mode === 'single' ? openIndex !== undefined : openIndexes !== undefined;
+    // Disable animation on initial render (for default open state).
+    const hasMountedRef = useRef(false);
+    useEffect(() => {
+        hasMountedRef.current = true;
+    }, []);
     const [internalSingle, setInternalSingle] = useState(mode === 'single' ? defaultOpenIndex : null);
-    const [internalMultiple, setInternalMultiple] = useState(mode === 'multiple' ? normalizeMultiple(defaultOpenIndexes) : []);
+    const [internalMultiple, setInternalMultiple] = useState(() => {
+        if (mode !== 'multiple')
+            return [];
+        if (defaultOpenIndexes === 'all')
+            return items.map((_, i) => i);
+        return normalizeMultiple(defaultOpenIndexes);
+    });
     const currentOpenIndexes = useMemo(() => {
         if (mode === 'single') {
             const current = isControlled ? (openIndex !== null && openIndex !== void 0 ? openIndex : null) : internalSingle;
@@ -55,5 +66,5 @@ export function Accordion({ items, mode = 'single', size = 'md', defaultOpenInde
         else
             commit([...currentOpenIndexes, index]);
     }
-    return (_jsx("div", { className: `${styles.container} ${styles[size]}`, children: items.map((item, i) => (_jsx(AccordionRow, { uid: uid, index: i, item: item, isOpen: openSet.has(i), onToggle: toggle }, i))) }));
+    return (_jsx("div", { className: `${styles.container} ${styles[size]}`, children: items.map((item, i) => (_jsx(AccordionRow, { uid: uid, index: i, item: item, isOpen: openSet.has(i), onToggle: toggle, shouldAnimate: hasMountedRef.current }, i))) }));
 }

package/dist/components/accordion/Accordion.module.css

@@ -5,7 +5,7 @@
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  gap: var(--spacing-xxs);
+  gap: var(--spacing-xs);
 }
 
 /* Size variables (consumed by AccordionRow) */

package/dist/components/accordion/components/AccordionRow.d.ts

@@ -6,5 +6,6 @@ export type AccordionRowProps = {
     item: AccordionItem;
     isOpen: boolean;
     onToggle: (index: number) => void;
+    shouldAnimate?: boolean;
 };
-export declare function AccordionRow({ uid, index, item, isOpen, onToggle, }: AccordionRowProps): JSX.Element;
+export declare function AccordionRow({ uid, index, item, isOpen, onToggle, shouldAnimate, }: AccordionRowProps): JSX.Element;

package/dist/components/accordion/components/AccordionRow.js

@@ -3,7 +3,7 @@ import { ChevronDown } from 'lucide-react';
 import { useLayoutEffect, useRef, useState } from 'react';
 import { Headline } from '../../../components/headline/Headline';
 import styles from './AccordionRow.module.css';
-function useCollapsibleHeight(isOpen) {
+function useCollapsibleHeight(isOpen, shouldAnimate) {
     const innerRef = useRef(null);
     const [height, setHeight] = useState('0px');
     useLayoutEffect(() => {
@@ -13,7 +13,9 @@ function useCollapsibleHeight(isOpen) {
             return;
         const prefersReduced = typeof window !== 'undefined' &&
             ((_b = (_a = window.matchMedia) === null || _a === void 0 ? void 0 : _a.call(window, '(prefers-reduced-motion: reduce)')) === null || _b === void 0 ? void 0 : _b.matches);
-        if (prefersReduced) {
+        // No animation on first render when default-open is used:
+        // just set the final height.
+        if (!shouldAnimate || prefersReduced) {
             setHeight(isOpen ? 'auto' : '0px');
             return;
         }
@@ -31,7 +33,7 @@ function useCollapsibleHeight(isOpen) {
                 setHeight('0px');
             });
         }
-    }, [isOpen]);
+    }, [isOpen, shouldAnimate]);
     function onTransitionEnd(e) {
         if (e.propertyName !== 'height')
             return;
@@ -42,10 +44,10 @@ function useCollapsibleHeight(isOpen) {
     }
     return { innerRef, height, onTransitionEnd };
 }
-export function AccordionRow({ uid, index, item, isOpen, onToggle, }) {
+export function AccordionRow({ uid, index, item, isOpen, onToggle, shouldAnimate = true, }) {
     const isDisabled = !!item.disabled;
     const buttonId = `${uid}-acc-btn-${index}`;
     const panelId = `${uid}-acc-panel-${index}`;
-    const { innerRef, height, onTransitionEnd } = useCollapsibleHeight(isOpen);
-    return (_jsxs("section", { className: `${styles.item} ${isOpen ? styles.open : ''} ${isDisabled ? styles.disabled : ''}`, children: [_jsx("h3", { className: styles.heading, children: _jsxs("button", { type: "button", id: buttonId, className: styles.trigger, "aria-expanded": isOpen, "aria-controls": panelId, onClick: () => onToggle(index), disabled: isDisabled, children: [_jsxs("span", { className: styles.title, children: [item.headerIcon ? _jsx("span", { className: styles.icon, children: item.headerIcon }) : null, _jsx(Headline, { disableMargin: true, size: 4, weight: 500, severity: item.severity, allowWrap: isOpen, children: item.header })] }), _jsx("span", { className: styles.chevron, "aria-hidden": "true", children: _jsx(ChevronDown, {}) })] }) }), _jsx("div", { id: panelId, role: "region", "aria-labelledby": buttonId, className: styles.panel, style: { height }, onTransitionEnd: onTransitionEnd, children: _jsx("div", { ref: innerRef, className: styles.content, children: item.children }) })] }));
+    const { innerRef, height, onTransitionEnd } = useCollapsibleHeight(isOpen, shouldAnimate);
+    return (_jsxs("section", { className: `${styles.item} ${isOpen ? styles.open : ''} ${isDisabled ? styles.disabled : ''}`, children: [_jsx("div", { children: _jsxs("button", { type: "button", id: buttonId, className: styles.trigger, "aria-expanded": isOpen, "aria-controls": panelId, onClick: () => onToggle(index), disabled: isDisabled, children: [_jsxs("span", { className: styles.title, children: [item.headerIcon ? _jsx("span", { className: styles.icon, children: item.headerIcon }) : null, _jsx(Headline, { disableMargin: true, size: 4, weight: 500, severity: item.severity, allowWrap: isOpen, children: item.header }), item.headerAddition] }), _jsx("span", { className: styles.chevron, "aria-hidden": "true", children: _jsx(ChevronDown, {}) })] }) }), _jsx("div", { id: panelId, role: "region", "aria-labelledby": buttonId, className: `${styles.panel} ${shouldAnimate ? styles.animate : styles.noAnimate}`, style: { height }, onTransitionEnd: onTransitionEnd, children: _jsx("div", { ref: innerRef, className: styles.content, children: item.children }) })] }));
 }

package/dist/components/accordion/components/AccordionRow.module.css

@@ -1,7 +1,3 @@
-.heading {
-  margin: 0;
-}
-
 .trigger {
   all: unset;
   box-sizing: border-box;
@@ -16,7 +12,7 @@
   user-select: none;
 
   padding: var(--acc-trigger-py) var(--acc-trigger-px);
-  background: var(--color-bg-contextual);
+  background: var(--color-bg-contextual-subtle);
 
   min-width: 0;
 }
@@ -35,10 +31,10 @@
   display: flex;
   align-items: center;
   gap: var(--spacing-xs);
-
   min-width: 0;
   flex: 1 1 auto;
   overflow: hidden;
+  justify-content: space-between;
 }
 
 .icon {
@@ -67,12 +63,20 @@
 .panel {
   overflow: hidden;
   height: 0px;
+}
+
+/* Default: animate only when class is present */
+.animate {
   transition: height var(--transition-slow) var(--ease-decelerate);
 }
 
-/* Padding inside so scrollHeight includes it */
+/* No animation (initial render default-open) */
+.noAnimate {
+  transition: none;
+}
+
 .content {
-  padding: var(--acc-content-py) var(--acc-trigger-px);
+  padding: var(--acc-content-py) 0;
 }
 
 @media (prefers-reduced-motion: reduce) {

package/dist/components/button/Button.d.ts

@@ -4,6 +4,7 @@ export type ButtonVariant = 'primary' | 'secondary' | 'outlined' | 'default' | '
 export type ButtonSize = Exclude<Size, 'xl'>;
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     variant?: ButtonVariant;
+    shape?: 'default' | 'rounded' | 'round';
     size?: ButtonSize;
     fullWidth?: boolean;
     icon?: React.ReactNode;

package/dist/components/button/Button.js

@@ -19,9 +19,9 @@ function mergeRefs(...refs) {
         }
     };
 }
-export const Button = React.forwardRef(function Button({ variant = 'outlined', size = 'md', fullWidth, icon, children, loading, active, spinIcon, tooltip, tooltipPlacement = 'top', isLink, type = 'button', ...rest }, ref) {
+export const Button = React.forwardRef(function Button({ variant = 'outlined', shape = 'default', size = 'md', fullWidth, icon, children, loading, active, spinIcon, tooltip, tooltipPlacement = 'top', isLink, type = 'button', ...rest }, ref) {
     const { className: userClassName, ...buttonProps } = rest;
-    const computedClassName = cx(styles.button, styles[variant], styles[size], fullWidth ? styles.fullWidth : '', active ? styles.active : '', loading ? styles.loading : '', isLink ? styles.link : '', userClassName);
+    const computedClassName = cx(styles.button, styles[variant], styles[size], fullWidth ? styles.fullWidth : '', active ? styles.active : '', loading ? styles.loading : '', shape !== 'default' ? styles[shape] : '', userClassName);
     const tooltipEnabled = Boolean(tooltip);
     // Tooltip anchored to the actual clickable element (button or link element)
     const { triggerProps, id: tooltipId } = useTooltipTrigger({
@@ -46,7 +46,7 @@ export const Button = React.forwardRef(function Button({ variant = 'outlined', s
         buttonEl = React.cloneElement(children, {
             ...buttonProps,
             ref: mergeRefs(childRef, ref),
-            className: cx(childClassName, computedClassName),
+            className: cx(childClassName, computedClassName, styles.buttonLink),
             ...(tooltipEnabled ? triggerProps : {}),
             'aria-describedby': describedBy,
             children: (_jsxs(_Fragment, { children: [icon && _jsx("span", { className: cx(styles.icon, spinIcon ? 'spin' : ''), children: icon }), children.props.children, loading && (_jsx("span", { style: { display: 'flex', opacity: 0.5 }, className: "spin", children: _jsx(LoaderCircle, {}) }))] })),

package/dist/components/button/Button.module.css

@@ -27,6 +27,10 @@
   user-select: none;
   white-space: nowrap;
 }
+.buttonLink {
+  color: inherit;
+  text-decoration: none;
+}
 
 .button:hover {
   transition:
@@ -40,6 +44,13 @@
   box-shadow: var(--focus-ring);
 }
 
+.round {
+  border-radius: 100%;
+}
+
+.rounded {
+  border-radius: var(--border-radius-rounded);
+}
 .button:disabled,
 .button[aria-disabled='true'] {
   cursor: not-allowed;
@@ -93,7 +104,7 @@
 .button.sm {
   height: var(--component-size-sm);
   min-block-size: var(--component-size-sm);
-  padding-inline: var(--spacing-sm);
+  padding-inline: var(--spacing-xs);
 }
 
 .button.xs {

package/dist/components/card/Card.module.css

@@ -28,7 +28,7 @@
 }
 
 .variantSubtle {
-  background-color: var(--card-bg-subtle, var(--color-bg-surface-subtle));
+  background-color: var(--card-bg-subtle, var(--color-bg-contextual-subtle));
 }
 
 .variantStrong {

package/dist/components/chip/Chip.js

@@ -16,5 +16,15 @@ export function Chip({ children, severity = 'neutral', loading, disableIcon = tr
     if (loading) {
         return _jsx(SkeletonLoaderItem, { width: chipWidth !== null && chipWidth !== void 0 ? chipWidth : '100px', height: "26px", radius: "25px" });
     }
-    return (_jsxs("div", { ref: chipRef, className: `${styles.container} ${severity ? styles[severity] : ''} ${fullWidth ? styles.fullWidth : ''} ${styles[size]} ${styles[type]}`, children: [severity && !disableIcon && _jsx(Icon, { severity: severity }), customIcon, children, onClose && (_jsx("button", { onClick: onClose, className: styles.close, children: _jsx(X, {}) }))] }));
+    const hasLeading = Boolean(customIcon) || (Boolean(severity) && !disableIcon);
+    const hasClose = typeof onClose === 'function';
+    return (_jsxs("div", { ref: chipRef, className: [
+            styles.container,
+            severity ? styles[severity] : '',
+            fullWidth ? styles.fullWidth : '',
+            styles[size],
+            styles[type],
+            hasLeading ? styles.hasLeading : '',
+            hasClose ? styles.hasClose : '',
+        ].join(' '), children: [hasLeading ? (_jsxs("span", { className: styles.leading, children: [severity && !disableIcon && _jsx(Icon, { severity: severity }), customIcon] })) : null, _jsx("span", { className: styles.label, children: children }), hasClose && (_jsx("button", { type: "button", onClick: onClose, className: styles.close, "aria-label": "Luk", children: _jsx(X, {}) }))] }));
 }

package/dist/components/chip/Chip.module.css

@@ -1,18 +1,23 @@
 .container {
+  /* local layout tokens */
+  --chip-gap: var(--spacing-xxs);
+  --chip-pad-y: var(--spacing-xxs);
+  --chip-pad-x: var(--spacing-md);
+
+  /* when no icon, compensate by half the gap on each side */
+  --chip-pad-x-noicon: calc(var(--chip-pad-x) + (var(--chip-gap) / 2));
+
   display: inline-flex;
   align-items: center;
-  gap: var(--space-inline-sm);
+  gap: var(--chip-gap);
   white-space: nowrap;
 
-  /* Neutral pill background + text */
-
   color: var(--chip-fg-default, var(--color-fg-default));
-
-  border-radius: var(--border-radius-default);
   border: var(--border-width-thin) solid transparent;
+  border-radius: var(--border-radius-default);
 
-  padding-block: var(--spacing-xxs);
-  padding-inline: var(--spacing-md);
+  padding-block: var(--chip-pad-y);
+  padding-inline: var(--chip-pad-x-noicon);
 
   font-family: var(--font-family);
   font-size: var(--font-size-sm);
@@ -25,71 +30,126 @@
     box-shadow var(--transition-fast) var(--ease-standard);
 }
 
-.container.rounded {
+/* Keep your preferred pill look */
+.rounded {
   border-radius: var(--border-radius-rounded);
 }
 
-.container.outlined {
+.outlined {
   border-radius: var(--border-radius-rounded);
   border: var(--border-width-thin) solid var(--color-border-default);
+  background-color: transparent;
 }
 
-.container svg {
-  inline-size: var(--icon-size-md);
-  block-size: var(--icon-size-md);
+.default {
+  border-radius: var(--border-radius-default);
+}
+
+/* ---- Leading icon logic ---- */
+.hasLeading {
+  /* symmetric tighter padding when icon exists */
+  padding-left: var(--spacing-xs);
+  padding-right: var(--spacing-xs);
+}
+
+/* Leading slot */
+.leading {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+}
+
+.label {
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
 }
 
-.sm svg {
+/* ---- Icon sizing ---- */
+.leading svg,
+.close svg {
   inline-size: var(--icon-size-sm);
   block-size: var(--icon-size-sm);
+  color: currentColor;
+}
+
+.sm .leading svg,
+.sm .close svg {
+  inline-size: 14px;
+  block-size: 14px;
+}
+
+.lg .leading svg,
+.lg .close svg {
+  inline-size: var(--icon-size-md);
+  block-size: var(--icon-size-md);
 }
 
-/* Small size */
+/* ---- Sizes ---- */
 .sm {
+  --chip-pad-y: var(--spacing-2xs);
+  --chip-pad-x: var(--spacing-xs);
+  /* keep same gap unless you explicitly want tighter; if you do, change only here */
+  /* --chip-gap: var(--spacing-2xs); */
+
   height: var(--component-size-xs);
-  padding-block: var(--spacing-xxs);
-  padding-inline: var(--spacing-xs);
   font-size: var(--font-size-xs);
+
+  /* recompute derived value */
+  --chip-pad-x-noicon: calc(var(--chip-pad-x) + (var(--chip-gap) / 2));
+
+  padding-block: var(--chip-pad-y);
+  padding-inline: var(--chip-pad-x-noicon);
 }
 
-/* Inverted variant: for dark / strong backgrounds */
-.container.invert {
-  background-color: transparent;
-  color: var(--color-fg-on-strong);
-  border-color: transparent;
+.sm.hasLeading {
+  padding-left: var(--spacing-xxs);
+  padding-right: var(--spacing-xxs);
 }
 
-/* Status variants (use status tokens) */
+.md {
+  height: var(--component-size-sm);
+}
+
+.lg {
+  --chip-pad-y: var(--spacing-xs);
+
+  height: var(--component-size-md);
+  padding-block: var(--chip-pad-y);
+}
 
-.container.neutral {
+/* ---- Variants / severities ---- */
+.neutral {
   background-color: var(--color-bg-contextual);
+  border-color: transparent;
 }
-.container.success {
+
+.success {
   background-color: var(--color-status-success-bg);
   color: var(--color-status-success-fg);
   border-color: var(--color-status-success-border);
 }
 
-.container.warning {
+.warning {
   background-color: var(--color-status-warning-bg);
   color: var(--color-status-warning-fg);
   border-color: var(--color-status-warning-border);
 }
 
-.container.error {
+.error {
   background-color: var(--color-status-error-bg);
   color: var(--color-status-error-fg);
   border-color: var(--color-status-error-border);
 }
 
-.container.info {
+.info {
   background-color: var(--color-status-info-bg);
   color: var(--color-status-info-fg);
   border-color: var(--color-status-info-border);
 }
 
-/* Brand variant */
-.container.brand {
+.brand {
   background-color: var(--color-brand);
   color: var(--color-fg-on-brand);
   border-color: transparent;
@@ -101,7 +161,7 @@
   justify-content: center;
 }
 
-/* Close button inside chip */
+/* Close button */
 .close {
   all: unset;
   display: inline-flex;
@@ -109,9 +169,11 @@
   justify-content: center;
   cursor: pointer;
   color: inherit;
+
   inline-size: var(--icon-size-md);
   block-size: var(--icon-size-md);
   border-radius: var(--border-radius-round);
+
   transition: background-color var(--transition-fast) var(--ease-standard);
 }
 

package/dist/components/circle/Circle.d.ts

@@ -1,6 +1,6 @@
 import type { ReactNode, JSX } from 'react';
 import { Severity } from '../../constants/severity.types';
-type CircleSize = 'xs' | 'sm' | 'md' | 'lg';
+type CircleSize = '2xs' | 'xs' | 'sm' | 'md' | 'lg';
 interface CircleProps {
     severity: Severity;
     children?: ReactNode;

package/dist/components/circle/Circle.module.css

@@ -5,7 +5,6 @@
   gap: var(--spacing-xs);
   white-space: nowrap;
   font-family: var(--font-family);
-  font-size: var(--font-size-sm);
   color: var(--color-fg-default);
 }
 
@@ -62,6 +61,11 @@
   box-shadow: 0 0 0 2px var(--color-status-info-bg);
 }
 
+.circle[data-size='2xs'] {
+  inline-size: var(--component-size-2xs);
+  block-size: var(--component-size-2xs);
+}
+
 .circle[data-size='xs'] {
   inline-size: var(--component-size-xxs);
   block-size: var(--component-size-xxs);

package/dist/components/clear-button/ClearButton.js

@@ -5,5 +5,5 @@ export function ClearButton({ onClick, absolute }) {
     return (_jsx("span", { className: `${styles.clearButton} ${absolute ? styles.absolute : ''}`, children: _jsx("span", { className: styles.button, role: "button", onClick: e => {
                 e.stopPropagation();
                 onClick();
-            }, children: _jsx(X, { size: 20 }) }) }));
+            }, children: _jsx(X, { size: 16 }) }) }));
 }

package/dist/components/clear-button/ClearButton.module.css

@@ -3,6 +3,9 @@
   align-items: center;
   justify-content: center;
   color: var(--color-fg-subtle);
+  padding: var(--spacing-xxs);
+  cursor: pointer;
+  border-radius: 100%;
 }
 
 .clearButton .button:hover {

package/dist/components/code-block/CodeBlock.d.ts

@@ -1,7 +1,11 @@
-import type { JSX } from 'react';
+import type { JSX, ReactNode } from 'react';
 export interface CodeBlockProps {
-    code: string;
+    code?: string;
+    children?: ReactNode;
     copyButton?: boolean;
+    copyText?: string;
     size?: 'sm' | 'md' | 'lg';
+    smart?: boolean;
+    wrap?: boolean;
 }
-export declare function CodeBlock({ code, copyButton, size }: CodeBlockProps): JSX.Element;
+export declare function CodeBlock({ code, children, copyButton, copyText, size, smart, wrap, }: CodeBlockProps): JSX.Element;

package/dist/components/code-block/CodeBlock.js

@@ -1,6 +1,39 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styles from './CodeBlock.module.css';
 import { CopyButton } from '../copy-button/CopyButton';
-export function CodeBlock({ code, copyButton, size = 'md' }) {
-    return (_jsxs("pre", { className: `${styles.container} ${styles[size]}`, tabIndex: 0, children: [copyButton && (_jsx("span", { className: styles.copyButton, children: _jsx(CopyButton, { style: "link", text: code }) })), _jsx("code", { className: styles.code, children: code })] }));
+const looksLikeStackFrame = (line) => {
+    const t = line.trim();
+    return (t.startsWith('at ') || // Java, JS
+        t.startsWith('...') ||
+        t.startsWith('Caused by:') ||
+        t.startsWith('Suppressed:') ||
+        t.startsWith('Traceback') || // Python header
+        t.startsWith('File ') || // Python
+        t.startsWith('↳') || // some tools
+        /^at\s+\w/.test(t));
+};
+export function CodeBlock({ code, children, copyButton, copyText, size = 'md', smart = true, wrap = true, }) {
+    var _a;
+    const text = typeof code === 'string' ? code : undefined;
+    const copy = (_a = copyText !== null && copyText !== void 0 ? copyText : text) !== null && _a !== void 0 ? _a : '';
+    // If children are provided, render them as-is (no line processing).
+    const hasChildren = children !== undefined && children !== null;
+    // Smart rendering only when we have plain text + no children.
+    const lines = smart && !hasChildren && typeof text === 'string' ? text.split('\n') : null;
+    return (_jsxs("pre", { className: [styles.container, styles[size], wrap ? styles.wrap : styles.noWrap].join(' '), tabIndex: 0, children: [copyButton && (_jsx("span", { className: styles.copyButton, children: _jsx(CopyButton, { shape: "round", variant: "inline", text: copy }) })), _jsx("code", { className: styles.code, children: hasChildren
+                    ? children
+                    : lines
+                        ? lines.map((line, i) => {
+                            const isFirst = i === 0;
+                            const isFrame = looksLikeStackFrame(line);
+                            const cls = [
+                                styles.line,
+                                isFirst ? styles.lineFirst : '',
+                                isFrame ? styles.lineFrame : '',
+                            ]
+                                .filter(Boolean)
+                                .join(' ');
+                            return (_jsxs("span", { className: cls, children: [line, '\n'] }, i));
+                        })
+                        : text })] }));
 }

package/dist/components/code-block/CodeBlock.module.css

@@ -47,8 +47,6 @@
   margin: 0;
   font-family: var(--font-family-mono);
   color: var(--color-fg-default);
-
-  /* ✅ Preserve formatting but avoid ugly breaking */
   white-space: pre-wrap;
   overflow-wrap: anywhere;
   word-break: normal; /* <- not break-all */
@@ -71,3 +69,52 @@
   opacity: 1;
   pointer-events: auto;
 }
+
+/* --- New: wrap control --- */
+.wrap .code {
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  word-break: normal;
+}
+
+.noWrap .code {
+  white-space: pre;
+  overflow-wrap: normal;
+  word-break: normal;
+}
+
+/* --- New: per-line styling (for smart mode) --- */
+.line {
+  display: inline; /* keep selection/copy behavior natural */
+}
+
+.lineFirst {
+  font-family: inherit;
+  font-weight: 500;
+  color: var(--color-fg-default);
+}
+
+/* Common stack frames are “noise”; deemphasize without hiding */
+.lineFrame {
+  color: var(--color-fg-subtle);
+}
+
+/* Optional: make the container a bit denser for logs */
+.container {
+  /* keep your existing properties ... */
+
+  /* Easy win: stacktraces feel less tall */
+  line-height: 1.35; /* instead of relaxed */
+}
+
+/* Optional: differentiate the code area slightly from surrounding UI */
+.container {
+  background: var(--color-bg-surface-strong); /* a touch more neutral than contextual */
+  border-color: var(--color-border-subtle);
+}
+
+/* Keep focus ring behavior */
+.container:focus-within {
+  border-color: var(--color-border-selected);
+  box-shadow: var(--shadow-xs), var(--focus-ring);
+}

package/dist/components/filter-field/FilterField.d.ts

@@ -23,9 +23,10 @@ export interface FilterFieldProps extends Omit<React.InputHTMLAttributes<HTMLInp
     label?: string;
     placeholder?: string;
     disabled?: boolean;
+    width?: string;
 }
 export declare const NUMBER_OPERATORS: Operator[];
-export declare function FilterField({ field, control, operator, value, onChange, operators, options, single, size, label, placeholder, disabled, 'data-cy': dataCy, ...inputProps }: FilterFieldProps & {
+export declare function FilterField({ field, control, operator, value, onChange, operators, options, single, size, label, placeholder, disabled, 'data-cy': dataCy, width, ...inputProps }: FilterFieldProps & {
     'data-cy'?: string;
 }): React.ReactElement;
 export {};