@stackone/malachite 2.21.0 → 2.22.0

package/dist/components/CardStrip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardStrip.js","sources":["../../src/components/CardStrip.tsx"],"sourcesContent":["import React, { useCallback, useLayoutEffect, useRef, useState } from 'react';\nimport ArrowLeftIcon from './CustomIcons/ArrowLeftIcon';\nimport ForwardArrowIcon from './CustomIcons/ForwardArrowIcon';\nimport PlusIcon from './CustomIcons/PlusIcon';\nimport { CONTENT_INSET } from './PageLayout/constants';\nimport {\n    CARD_FLARE_PX,\n    CARD_FLARE_TIP_PX,\n    CARD_WIDTH_PX,\n    FLARE_CLASS,\n    STRIP_RULE_PX,\n} from './SelectableCard';\nimport { CardStripSlotContext, PINNED_SLOT, SCROLLED_SLOT } from './cardStripSlot';\nimport { FOCUS_RING } from './focusRing';\nimport { useAdoptedStyleSheet } from './useAdoptedStyleSheet';\n\nexport type CardStripAddTileEmphasis = 'primary' | 'secondary';\n\nexport interface CardStripAddTileProps {\n    /** Visible label, e.g. \"Add Profile\". Also names the button for assistive tech. */\n    label: string;\n    /** Defaults to a plus. */\n    icon?: React.ReactNode;\n    onClick: () => void;\n    disabled?: boolean;\n    /** Leave unset: CardStrip picks `primary` while the strip is empty and `secondary` once cards exist. */\n    emphasis?: CardStripAddTileEmphasis;\n    className?: string;\n}\n\n/** Palette for the strip's rule. Pass the tone of whatever card is selected. */\nexport type CardStripTone = 'profile' | 'library' | 'editing';\n\nexport interface CardStripProps {\n    /** The selected card's value, matched against each radio child's `data-value`. */\n    value: string;\n    /** Overrides the palette the strip reads off the selected card. See `CardStripTone`. */\n    tone?: CardStripTone;\n    onChange: (value: string) => void;\n    /** Cards. Any element with `role=\"radio\"` and a `data-value` joins the group; an\n     *  add tile must be a direct child or it scrolls with the cards. */\n    children: React.ReactNode;\n    /** Pinned, non-scrolling slot before the cards (the Library card in the profile picker). */\n    leading?: React.ReactNode;\n    /** Circular scroll affordances, shown only on an edge that can actually scroll. */\n    arrows?: boolean;\n    /** Fade the cards out at any edge they scroll past. */\n    fadeEdges?: boolean;\n    /** Snap cards to the leading edge as the strip scrolls. */\n    snap?: boolean;\n    /** Run the bottom rule the full width of the page card while the cards stay on the gutter.\n     *  Only has an effect inside a layout that publishes its inset (`PageLayout`). */\n    bleed?: boolean;\n    /** Whether a selection change scrolls the selected card into view. Set `false` when the\n     *  value comes from a URL, or a deep-linked strip below the fold jumps the page on load. */\n    scrollSelectedIntoView?: boolean;\n    'aria-label'?: string;\n    'aria-labelledby'?: string;\n    className?: string;\n    style?: React.CSSProperties;\n}\n\n/** Arrow keys move AND select, per the WAI-ARIA radiogroup pattern. */\nconst NAV_KEYS = new Set(['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End']);\n\nconst RADIO_SELECTOR = '[role=\"radio\"]';\nconst SCROLLER_ATTR = 'data-card-strip-scroller';\nconst TROUGH_ATTR = 'data-card-strip-trough';\nconst ROOT_CLASS = 'malachite-card-strip';\nconst SCROLLER_CLASS = 'malachite-card-strip-scroller';\nconst FADE_CLASS = 'malachite-card-strip-fade';\nconst ADD_TILE_CLASS = 'malachite-card-strip-add-tile';\n\nconst ACTIONS_SELECTOR = '[data-selectable-card-actions]';\nconst FOCUSABLE_SELECTOR =\n    'a[href], area[href], button, input, select, textarea, iframe, [contenteditable=\"true\"], [tabindex]';\nconst PREV_TABINDEX_ATTR = 'data-card-strip-prev-tabindex';\n\nconst EDGE_EPSILON_PX = 1;\nconst SCROLL_STEP_RATIO = 0.8;\n\nconst scrollStepFor = (scroller: HTMLElement): number => {\n    const [first, second] = Array.from(scroller.children);\n    const pitch =\n        first && second\n            ? second.getBoundingClientRect().left - first.getBoundingClientRect().left\n            : (first?.getBoundingClientRect().width ?? 0);\n    // `clientWidth` counts the flare padding, which is not width a card can be read in.\n    const visible = scroller.clientWidth - CARD_FLARE_PX * 2;\n\n    if (pitch <= 0) {\n        return visible * SCROLL_STEP_RATIO;\n    }\n\n    return Math.max(1, Math.floor(visible / pitch)) * pitch;\n};\nconst FADE_WIDTH_PX = 80;\n\nconst ARROW_SIZE_PX = 20;\nconst ARROW_GLYPH_PX = 11;\nconst GUTTER_REST_PX = 12;\nconst GUTTER_OPEN_PX = 52;\nconst ARROW_OFFSET_PX = (GUTTER_OPEN_PX + ARROW_SIZE_PX) / 2;\n\nconst LIP_SHADOW = 'var(--malachite-shadow-default)';\nconst ARROW_BACKGROUND =\n    'var(--malachite-card-strip-arrow-background, var(--malachite-card-background, #ffffff))';\nconst ARROW_BORDER = 'var(--malachite-card-strip-arrow-border, #e8e8e8)';\nconst TROUGH_BACKGROUND = 'var(--malachite-card-strip-background, #f1f1f1)';\nconst CARD_CORNER = 'var(--malachite-radius-xxl, 14px)';\nconst CARD_RADIUS = `${CARD_CORNER} ${CARD_CORNER} 0 0`;\nconst TROUGH_CORNER = 'var(--malachite-radius-xxxl, 16px)';\nconst TROUGH_RADIUS = `${TROUGH_CORNER} ${TROUGH_CORNER} 0 0`;\nconst TROUGH_SHOULDER_PX = 4;\nconst FADE_RAMP_PX = FADE_WIDTH_PX + (CARD_FLARE_PX - TROUGH_SHOULDER_PX);\nconst SLOT_WIDTH_PX = CARD_WIDTH_PX;\nconst DIVIDER_COLOR = 'var(--malachite-card-strip-divider, #dddddd)';\nconst FADE_COLOR = 'var(--malachite-card-strip-fade, transparent)';\nconst ADD_HOVER_BACKGROUND = 'var(--malachite-selectable-card-hover-background, #e8e8e8)';\nconst ADD_PILL_BORDER = 'var(--malachite-card-strip-arrow-border, #e8e8e8)';\nconst ADD_PILL_BORDER_ACTIVE = 'var(--malachite-selectable-card-hover-rule, #bbbbbb)';\nconst ADD_PILL_SHADOW_DEEP = '0px 1px 0px 0px rgba(0, 0, 0, 0.4)';\nconst ADD_PILL_BACKGROUND = 'var(--malachite-card-background, #ffffff)';\nconst ADD_PILL_FOREGROUND = 'var(--malachite-text-primary, #0a0a0a)';\nconst ADD_PILL_PRIMARY_BACKGROUND =\n    'var(--malachite-card-strip-add-primary-background, var(--malachite-text-primary, #0a0a0a))';\nconst ADD_PILL_PRIMARY_FOREGROUND =\n    'var(--malachite-card-strip-add-primary-foreground, var(--malachite-card-background, #ffffff))';\nconst ADD_PILL_PRIMARY_SHADOW = '0px 1px 0px 0px rgba(10, 10, 10, 0.7)';\n\nconst BOTTOM_RULE_WEIGHT_PX = STRIP_RULE_PX;\n\nconst OVERFLOW_INSET_PX = 16;\n\nconst CLIP_SLACK_PX = 9999;\nconst FOCUS_RING_REACH_PX = 4;\n\n/** A sheet, not inline styles: these rules have to reach children this component does not render. */\nconst SCROLLER_CSS = `\n.${ROOT_CLASS} {\n    clip-path: inset(-${CLIP_SLACK_PX}px -${CLIP_SLACK_PX}px 0);\n}\n.${ROOT_CLASS}:has(:focus-visible) {\n    clip-path: inset(-${CLIP_SLACK_PX}px -${CLIP_SLACK_PX}px -${FOCUS_RING_REACH_PX}px);\n}\n.${SCROLLER_CLASS} {\n    display: flex;\n    flex-wrap: nowrap;\n    overflow-x: auto;\n    overflow-y: hidden;\n    scroll-behavior: smooth;\n    scrollbar-width: none;\n    -ms-overflow-style: none;\n    padding-block: ${OVERFLOW_INSET_PX}px;\n    margin-block: -${OVERFLOW_INSET_PX}px;\n    /* overflow-x clips both axes, so the end cards would lose a flare; the negative margin trades\n       the padding back out and scroll-padding keeps the rest position at zero. */\n    padding-inline: ${CARD_FLARE_PX}px;\n    margin-inline: -${CARD_FLARE_PX}px;\n    scroll-padding-inline: ${CARD_FLARE_PX}px;\n}\n/* A card focused at a faded edge has to stay readable, so the fade lifts entirely. */\n.${ROOT_CLASS}:has(:focus-visible) .${FADE_CLASS} {\n    display: none;\n}\n.${SCROLLER_CLASS}::-webkit-scrollbar {\n    display: none;\n}\n/* No bottom edge: the strip's rule is the baseline for the add tile as much as for a card. */\n.${ADD_TILE_CLASS} > * {\n    background: ${TROUGH_BACKGROUND};\n    border-radius: ${CARD_RADIUS};\n}\n.${ADD_TILE_CLASS}:hover:not(:has(button:disabled)) > * {\n    background: ${ADD_HOVER_BACKGROUND};\n}\n.${ADD_TILE_CLASS} button:active:not(:disabled) {\n    opacity: 0.8;\n}\n.${ADD_TILE_CLASS}:has(button:active) > * {\n    background: ${TROUGH_BACKGROUND};\n}\n.${ADD_TILE_CLASS}[data-emphasis='secondary'] button {\n    border-color: ${ADD_PILL_BORDER};\n    box-shadow: ${LIP_SHADOW};\n}\n.${ADD_TILE_CLASS}[data-emphasis='secondary']:hover:not(:has(button:disabled)) button {\n    border-color: ${ADD_PILL_BORDER_ACTIVE};\n    box-shadow: ${ADD_PILL_SHADOW_DEEP};\n}\n.${ADD_TILE_CLASS}[data-emphasis='secondary'] button:active:not(:disabled) {\n    border-color: ${ADD_PILL_BORDER_ACTIVE};\n    box-shadow: ${ADD_PILL_SHADOW_DEEP};\n}\n.${ADD_TILE_CLASS}[data-emphasis='primary'] button {\n    border-color: transparent;\n    box-shadow: ${ADD_PILL_PRIMARY_SHADOW};\n}\n.${SCROLLER_CLASS} > * {\n    flex: 0 0 auto;\n    min-width: 0;\n}\n.${SCROLLER_CLASS} > * + * {\n    border-left: 1px solid ${DIVIDER_COLOR};\n}\n.${SCROLLER_CLASS}[data-snap='true'] {\n    scroll-snap-type: x proximity;\n}\n.${SCROLLER_CLASS}[data-snap='true'] > * {\n    scroll-snap-align: start;\n}\n@media (prefers-reduced-motion: reduce) {\n    .${SCROLLER_CLASS} {\n        scroll-behavior: auto;\n    }\n    .${SCROLLER_CLASS}[data-snap='true'] {\n        scroll-snap-type: none;\n    }\n    .${SCROLLER_CLASS}[data-snap='true'] > * {\n        scroll-snap-align: none;\n    }\n}`;\n\nconst STYLE_ID = 'malachite-card-strip-style';\n\n/** `window.matchMedia` is absent under SSR and in older test environments. */\nconst prefersReducedMotion = (): boolean => {\n    if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {\n        return true;\n    }\n    return window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n};\n\nconst radioValue = (radio: HTMLElement): string | null =>\n    radio.dataset.value ?? radio.getAttribute('value');\n\nconst isRadioDisabled = (radio: HTMLElement): boolean =>\n    radio.hasAttribute('disabled') || radio.getAttribute('aria-disabled') === 'true';\n\nconst actionsFor = (radio: HTMLElement): HTMLElement | null => {\n    const card = radio.parentElement;\n    if (!card || card.querySelectorAll(RADIO_SELECTOR).length !== 1) {\n        return null;\n    }\n    return card.querySelector<HTMLElement>(ACTIONS_SELECTOR);\n};\n\n/** A card is wider than its radio, so `closest` misses clicks on the count row. */\nconst radioForClick = (target: Element, root: Element): HTMLElement | null => {\n    const direct = target.closest<HTMLElement>(RADIO_SELECTOR);\n    if (direct) {\n        return direct;\n    }\n    if (target.closest(ACTIONS_SELECTOR)) {\n        return null;\n    }\n    let node: Element | null = target;\n    while (node && root.contains(node)) {\n        const radios: NodeListOf<HTMLElement> = node.querySelectorAll(RADIO_SELECTOR);\n        if (radios.length === 1 && radios[0].parentElement === node) {\n            return radios[0];\n        }\n        node = node.parentElement;\n    }\n    return null;\n};\n\nconst actionControls = (radio: HTMLElement): HTMLElement[] => {\n    const actions = actionsFor(radio);\n    return actions ? Array.from(actions.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR)) : [];\n};\n\nconst suppressTabStop = (element: HTMLElement): void => {\n    if (!element.hasAttribute(PREV_TABINDEX_ATTR)) {\n        element.setAttribute(PREV_TABINDEX_ATTR, element.getAttribute('tabindex') ?? '');\n    }\n    element.setAttribute('tabindex', '-1');\n};\n\nconst restoreTabStop = (element: HTMLElement): void => {\n    if (!element.hasAttribute(PREV_TABINDEX_ATTR)) {\n        return;\n    }\n    const previous = element.getAttribute(PREV_TABINDEX_ATTR);\n    element.removeAttribute(PREV_TABINDEX_ATTR);\n    if (previous) {\n        element.setAttribute('tabindex', previous);\n    } else {\n        element.removeAttribute('tabindex');\n    }\n};\n\nconst TONE_RULE: Record<CardStripTone, string> = {\n    profile: 'var(--malachite-selectable-card-selected-border, #047b43)',\n    library: 'var(--malachite-selectable-card-library-selected-border, #bbbbbb)',\n    editing: 'var(--malachite-selectable-card-pending-foreground, #96580a)',\n};\nconst RULE_ROW_STYLE: React.CSSProperties = {\n    backgroundRepeat: 'no-repeat',\n    backgroundPosition: 'left bottom',\n    backgroundSize: `100% ${BOTTOM_RULE_WEIGHT_PX}px`,\n};\n\n/** The rule runs under the flare's tip rather than butting against it, so antialiasing\n *  cannot open the junction into a gap. */\nconst RULE_GAP_OVERLAP_PX = 0.5;\n\nconst FLARE_TIP_INSET_PX = CARD_FLARE_PX - CARD_FLARE_TIP_PX;\n\nconst flareTips = (card: HTMLElement): { left: number; right: number } | null => {\n    const flare = card.querySelector(`:scope > .${FLARE_CLASS}`);\n    if (!flare) {\n        return null;\n    }\n    const { left, right } = flare.getBoundingClientRect();\n    return { left: left + FLARE_TIP_INSET_PX, right: right - FLARE_TIP_INSET_PX };\n};\n\n/** The rule is cut where the selected card stands, never covered: the strip's clip lands on the\n *  rule's own edge, so a cover takes the same partial alpha and the rule bleeds through it. */\nconst paintRule = (\n    root: HTMLElement | null,\n    scroller: HTMLElement | null,\n    card: HTMLElement | null | undefined,\n    tone: CardStripTone,\n): void => {\n    if (!root) {\n        return;\n    }\n    const colour = TONE_RULE[tone];\n    const rootRect = root.getBoundingClientRect();\n    const rootLeft = rootRect.left;\n    const clip = card && scroller?.contains(card) ? scroller.getBoundingClientRect() : rootRect;\n    const cardRect = card?.getBoundingClientRect();\n    const tips = card ? flareTips(card) : null;\n    const tipLeft = tips?.left ?? (cardRect ? cardRect.left - CARD_FLARE_TIP_PX : 0);\n    const tipRight = tips?.right ?? (cardRect ? cardRect.right + CARD_FLARE_TIP_PX : 0);\n    const from = cardRect ? Math.max(tipLeft, clip.left) + RULE_GAP_OVERLAP_PX - rootLeft : 0;\n    const to = cardRect ? Math.min(tipRight, clip.right) - RULE_GAP_OVERLAP_PX - rootLeft : 0;\n\n    root.style.backgroundImage =\n        to > from\n            ? `linear-gradient(to right, ${colour} 0 ${from}px, transparent ${from}px ${to}px, ${colour} ${to}px 100%)`\n            : `linear-gradient(to right, ${colour} 0 100%)`;\n};\n\nconst BLEED_STYLE: React.CSSProperties = {\n    marginInline: `calc(${CONTENT_INSET} * -1)`,\n    paddingInline: CONTENT_INSET,\n};\n\n/** The rule's row is a margin, never padding: a background paints under its own padding, which\n *  would hide the very line the troughs stand on. */\nconst TROUGH_SURFACE: React.CSSProperties = {\n    background: TROUGH_BACKGROUND,\n    borderRadius: TROUGH_RADIUS,\n    paddingTop: `${TROUGH_SHOULDER_PX}px`,\n    paddingInline: `${TROUGH_SHOULDER_PX}px`,\n    marginBottom: `${BOTTOM_RULE_WEIGHT_PX}px`,\n};\nconst TROUGH_STYLE: React.CSSProperties = {\n    ...TROUGH_SURFACE,\n    marginInline: `${GUTTER_REST_PX}px`,\n};\nconst TROUGH_GUTTER_STYLES: Record<string, React.CSSProperties> = Object.fromEntries(\n    [GUTTER_REST_PX, GUTTER_OPEN_PX].flatMap((start) =>\n        [GUTTER_REST_PX, GUTTER_OPEN_PX].map((end) => [\n            `${start}:${end}`,\n            { ...TROUGH_SURFACE, marginInline: `${start}px ${end}px` },\n        ]),\n    ),\n);\nconst ADD_TILE_SHAPE_STYLE: React.CSSProperties = TROUGH_SURFACE;\n\nconst PINNED_SLOT_STYLE: React.CSSProperties = TROUGH_SURFACE;\n\nconst EMPTY_ADD_SLOT_STYLE: React.CSSProperties = {\n    marginInlineStart: `${GUTTER_REST_PX}px`,\n};\n\nconst ADD_PILL_FILL: Record<CardStripAddTileEmphasis, React.CSSProperties> = {\n    primary: {\n        backgroundColor: ADD_PILL_PRIMARY_BACKGROUND,\n        color: ADD_PILL_PRIMARY_FOREGROUND,\n    },\n    secondary: { backgroundColor: ADD_PILL_BACKGROUND, color: ADD_PILL_FOREGROUND },\n};\n\nconst AddTile: React.FC<CardStripAddTileProps> = ({\n    label,\n    icon,\n    onClick,\n    disabled = false,\n    emphasis = 'secondary',\n    className = '',\n}) => (\n    <div\n        className={ADD_TILE_CLASS}\n        data-emphasis={emphasis}\n        style={{\n            ...ADD_TILE_SHAPE_STYLE,\n            width: `${SLOT_WIDTH_PX}px`,\n            height: `calc(100% - ${BOTTOM_RULE_WEIGHT_PX}px)`,\n        }}\n    >\n        <div className=\"flex h-full items-center justify-center px-4\">\n            <button\n                type=\"button\"\n                onClick={onClick}\n                disabled={disabled}\n                style={ADD_PILL_FILL[emphasis]}\n                className={`${FOCUS_RING} inline-flex items-center justify-center gap-1.5 h-[var(--malachite-control-height-medium,32px)] w-[108px] px-2.5 rounded-xl border border-solid text-[length:var(--malachite-font-size-small,13px)] font-medium whitespace-nowrap ${\n                    disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'\n                } ${className}`}\n            >\n                <span className=\"inline-flex h-[13px] w-[13px] shrink-0 items-center justify-center\">\n                    {icon ?? <PlusIcon size={13} />}\n                </span>\n                {label}\n            </button>\n        </div>\n    </div>\n);\n\nconst isAddTile = (node: React.ReactNode): node is React.ReactElement<CardStripAddTileProps> =>\n    React.isValidElement(node) && node.type === AddTile;\n\nconst hidesAddTile = (child: React.ReactNode): boolean =>\n    React.isValidElement<{ children?: React.ReactNode }>(child) &&\n    child.type === React.Fragment &&\n    React.Children.toArray(child.props.children).some(isAddTile);\n\ninterface ArrowButtonProps {\n    side: 'left' | 'right';\n    onClick: () => void;\n}\n\nconst ArrowButton: React.FC<ArrowButtonProps> = ({ side, onClick }) => (\n    <button\n        type=\"button\"\n        tabIndex={-1}\n        aria-hidden=\"true\"\n        aria-label={side === 'left' ? 'Scroll left' : 'Scroll right'}\n        onClick={onClick}\n        className=\"absolute top-1/2 -translate-y-1/2 z-10 inline-flex items-center justify-center w-5 h-5 rounded-lg cursor-pointer text-[var(--malachite-text-secondary)]\"\n        style={{\n            [side]: `-${ARROW_OFFSET_PX}px`,\n            background: ARROW_BACKGROUND,\n            border: `1px solid ${ARROW_BORDER}`,\n            boxShadow: LIP_SHADOW,\n        }}\n    >\n        {side === 'left' ? (\n            <ArrowLeftIcon size={ARROW_GLYPH_PX} />\n        ) : (\n            <ForwardArrowIcon size={ARROW_GLYPH_PX} />\n        )}\n    </button>\n);\n\n/** A horizontally scrolling radiogroup of cards — the \"pick one of these\" strip. */\nconst CardStrip: React.FC<CardStripProps> & { AddTile: React.FC<CardStripAddTileProps> } = ({\n    value,\n    tone,\n    onChange,\n    children,\n    leading,\n    arrows = true,\n    fadeEdges = true,\n    snap = true,\n    bleed = false,\n    scrollSelectedIntoView = true,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    className = '',\n    style,\n}) => {\n    const rootRef = useRef<HTMLDivElement>(null);\n    const scrollerRef = useRef<HTMLDivElement>(null);\n    const [edges, setEdges] = useState({ canScrollLeft: false, canScrollRight: false });\n\n    useAdoptedStyleSheet(rootRef, SCROLLER_CSS, STYLE_ID);\n\n    const childList = React.Children.toArray(children);\n    const cards = childList.filter((child) => !isAddTile(child));\n    const wrappedAddTile = cards.some(hidesAddTile);\n    const hasCards = cards.length > 0;\n\n    const addTiles = childList\n        .filter(isAddTile)\n        .map((tile) =>\n            tile.props.emphasis === undefined\n                ? React.cloneElement(tile, { emphasis: hasCards ? 'secondary' : 'primary' })\n                : tile,\n        );\n\n    const childCount = childList.length;\n\n    const getRadios = useCallback((): HTMLElement[] => {\n        const root = rootRef.current;\n        if (!root) {\n            return [];\n        }\n        return Array.from(root.querySelectorAll<HTMLElement>(RADIO_SELECTOR));\n    }, []);\n\n    const getNavigableRadios = useCallback(\n        (): HTMLElement[] => getRadios().filter((radio) => radioValue(radio) !== null),\n        [getRadios],\n    );\n\n    const warned = useRef(new Set<string>());\n    const warnOnce = useCallback((key: string, message: string): void => {\n        if (warned.current.has(key)) {\n            return;\n        }\n        warned.current.add(key);\n        console.warn(message);\n    }, []);\n\n    const [derivedTone, setDerivedTone] = useState<CardStripTone>('profile');\n\n    useLayoutEffect(() => {\n        const selectedCard = getRadios()\n            .find((radio) => radioValue(radio) === value)\n            ?.parentElement?.getAttribute('data-variant');\n        if (\n            selectedCard === 'profile' ||\n            selectedCard === 'library' ||\n            selectedCard === 'editing'\n        ) {\n            setDerivedTone(selectedCard);\n        }\n    }, [getRadios, value]);\n\n    useLayoutEffect(() => {\n        const radios = getRadios();\n        const navigable = getNavigableRadios();\n        const selected = navigable.find((radio) => radioValue(radio) === value);\n        const tabStop = selected ?? navigable.find((radio) => !isRadioDisabled(radio)) ?? null;\n\n        radios.forEach((radio) => {\n            const holdsTabStop = radio === tabStop;\n            const nextTabIndex = holdsTabStop ? 0 : -1;\n            if (radio.tabIndex !== nextTabIndex) {\n                radio.tabIndex = nextTabIndex;\n            }\n            for (const control of actionControls(radio)) {\n                if (holdsTabStop) {\n                    restoreTabStop(control);\n                } else {\n                    suppressTabStop(control);\n                }\n            }\n        });\n\n        if (process.env.NODE_ENV === 'production') {\n            return;\n        }\n\n        if (navigable.length !== radios.length) {\n            warnOnce(\n                'missing-value',\n                'CardStrip: a child with role=\"radio\" has no `data-value`. It cannot be selected or reached by arrow keys, so it is excluded from the radio set. Give every card a `data-value`.',\n            );\n        }\n\n        const values = new Set<string>();\n        for (const radio of navigable) {\n            const current = radioValue(radio);\n            if (current === null) {\n                continue;\n            }\n            if (values.has(current)) {\n                warnOnce(\n                    `duplicate:${current}`,\n                    `CardStrip: two cards share the data-value \"${current}\". Both will read as checked and only the first is selectable — data-value must be unique.`,\n                );\n            }\n            values.add(current);\n        }\n\n        const selectionSettled = value !== '';\n\n        if (radios.length > 0 && selectionSettled && !values.has(value)) {\n            warnOnce(\n                `unmatched:${value}`,\n                `CardStrip: value \"${value}\" matches no card's data-value, so the group reports no selection.`,\n            );\n        }\n\n        const checked = radios.filter(\n            (radio) => radio.getAttribute('aria-checked') === 'true',\n        ).length;\n        if (radios.length > 0 && selectionSettled && checked !== 1) {\n            warnOnce(\n                `checked:${checked}`,\n                `CardStrip: ${checked} cards are aria-checked, but a radiogroup has exactly one. Drive each card's checked state from the strip's \\`value\\`.`,\n            );\n        }\n\n        if (wrappedAddTile) {\n            warnOnce(\n                'wrapped-add-tile',\n                'CardStrip: a CardStrip.AddTile inside a fragment is treated as a card and scrolls with them. The add tile must be a direct child of CardStrip.',\n            );\n        }\n    });\n\n    // biome-ignore lint/correctness/useExhaustiveDependencies: cards arriving is the signal\n    useLayoutEffect(() => {\n        if (!scrollSelectedIntoView) {\n            return;\n        }\n        const scroller = scrollerRef.current;\n        const selected = getRadios().find((radio) => radioValue(radio) === value);\n        // jsdom implements neither, and a strip that cannot scroll has nothing to bring into view.\n        if (!scroller || !selected || typeof scroller.scrollTo !== 'function') {\n            return;\n        }\n\n        // Positioned rather than asked for: the track is scroll-snapped, and `scrollIntoView`\n        // on a card several widths away lands back on the nearest snap point instead — so a\n        // card appended past the end never came into view at all.\n        // Measured against the scroller rather than an offset parent: the cards are flex\n        // children whose `offsetParent` is not the scroller, so `offsetLeft` is not its frame.\n        const card = (selected.closest('[role=\"radio\"]') ?? selected) as HTMLElement;\n        const cardRect = card.getBoundingClientRect();\n        const viewRect = scroller.getBoundingClientRect();\n        const left = scroller.scrollLeft + (cardRect.left - viewRect.left);\n        const right = left + cardRect.width;\n        const visibleFrom = scroller.scrollLeft + CARD_FLARE_PX;\n        const visibleTo = scroller.scrollLeft + scroller.clientWidth - CARD_FLARE_PX;\n\n        if (left >= visibleFrom && right <= visibleTo) {\n            return;\n        }\n\n        scroller.scrollTo({\n            left:\n                right > visibleTo\n                    ? right - scroller.clientWidth + CARD_FLARE_PX\n                    : left - CARD_FLARE_PX,\n            behavior: 'instant',\n        });\n    }, [getRadios, scrollSelectedIntoView, value, childCount]);\n\n    const ruleTone = tone ?? derivedTone;\n    const callerPaintsBackground =\n        style?.background !== undefined || style?.backgroundImage !== undefined;\n\n    const measure = useCallback(() => {\n        const scroller = scrollerRef.current;\n        if (!callerPaintsBackground) {\n            paintRule(\n                rootRef.current,\n                scroller,\n                getRadios().find((radio) => radioValue(radio) === value)?.parentElement,\n                ruleTone,\n            );\n        }\n        if (!scroller) {\n            return;\n        }\n        const { scrollWidth, clientWidth, scrollLeft } = scroller;\n        const overflows = scrollWidth > clientWidth + EDGE_EPSILON_PX;\n        const next = {\n            canScrollLeft: overflows && scrollLeft > EDGE_EPSILON_PX,\n            canScrollRight: overflows && scrollLeft + clientWidth < scrollWidth - EDGE_EPSILON_PX,\n        };\n        setEdges((previous) =>\n            previous.canScrollLeft === next.canScrollLeft &&\n            previous.canScrollRight === next.canScrollRight\n                ? previous\n                : next,\n        );\n    }, [callerPaintsBackground, getRadios, ruleTone, value]);\n\n    // biome-ignore lint/correctness/useExhaustiveDependencies: adding or removing a card changes the scroll width, so re-measure on the count\n    useLayoutEffect(() => {\n        measure();\n\n        const scroller = scrollerRef.current;\n        if (!scroller) {\n            return;\n        }\n\n        const onScroll = (): void => measure();\n        scroller.addEventListener('scroll', onScroll, { passive: true });\n\n        const observer =\n            typeof ResizeObserver !== 'undefined' ? new ResizeObserver(() => measure()) : null;\n        observer?.observe(scroller);\n\n        return () => {\n            scroller.removeEventListener('scroll', onScroll);\n            observer?.disconnect();\n        };\n    }, [measure, childCount]);\n\n    const scrollByStep = useCallback((direction: -1 | 1) => {\n        const scroller = scrollerRef.current;\n        if (!scroller || typeof scroller.scrollBy !== 'function') {\n            return;\n        }\n        scroller.scrollBy({\n            left: direction * scrollStepFor(scroller),\n            behavior: prefersReducedMotion() ? 'auto' : 'smooth',\n        });\n    }, []);\n\n    const handleKeyDown = useCallback(\n        (event: React.KeyboardEvent) => {\n            if (!NAV_KEYS.has(event.key)) {\n                return;\n            }\n\n            const target = event.target;\n            if (!(target instanceof Element) || !target.closest(RADIO_SELECTOR)) {\n                return;\n            }\n\n            const enabled = getNavigableRadios().filter((radio) => !isRadioDisabled(radio));\n            if (enabled.length === 0) {\n                return;\n            }\n\n            event.preventDefault();\n\n            const currentPosition = enabled.findIndex((radio) => radioValue(radio) === value);\n            let nextPosition: number;\n            if (event.key === 'Home') {\n                nextPosition = 0;\n            } else if (event.key === 'End') {\n                nextPosition = enabled.length - 1;\n            } else {\n                const delta = event.key === 'ArrowLeft' || event.key === 'ArrowUp' ? -1 : 1;\n                const from = currentPosition === -1 ? 0 : currentPosition;\n                nextPosition = (from + delta + enabled.length) % enabled.length;\n            }\n\n            const next = enabled[nextPosition];\n            const nextValue = radioValue(next);\n            if (nextValue !== null && nextValue !== value) {\n                onChange(nextValue);\n            }\n            next.focus();\n        },\n        [getNavigableRadios, onChange, value],\n    );\n\n    const handleClick = useCallback(\n        (event: React.MouseEvent) => {\n            const target = event.target;\n            if (!(target instanceof Element)) {\n                return;\n            }\n            const root = rootRef.current;\n            if (!root) {\n                return;\n            }\n            const radio = radioForClick(target, root);\n            if (!radio || isRadioDisabled(radio)) {\n                return;\n            }\n            const clicked = radioValue(radio);\n            if (clicked !== null && clicked !== value) {\n                onChange(clicked);\n            }\n        },\n        [onChange, value],\n    );\n\n    const showLeftArrow = arrows && edges.canScrollLeft;\n    const showRightArrow = arrows && edges.canScrollRight;\n\n    const fadeLeft = fadeEdges && edges.canScrollLeft;\n    const fadeRight = fadeEdges && edges.canScrollRight;\n    const troughStyle = arrows\n        ? TROUGH_GUTTER_STYLES[\n              `${showLeftArrow ? GUTTER_OPEN_PX : GUTTER_REST_PX}:${\n                  showRightArrow ? GUTTER_OPEN_PX : GUTTER_REST_PX\n              }`\n          ]\n        : TROUGH_STYLE;\n\n    return (\n        <div\n            ref={rootRef}\n            onKeyDown={handleKeyDown}\n            onClick={handleClick}\n            className={`${ROOT_CLASS} flex items-stretch ${className}`}\n            style={{\n                ...RULE_ROW_STYLE,\n                ...(bleed ? BLEED_STYLE : null),\n                ...style,\n            }}\n        >\n            <div\n                role=\"radiogroup\"\n                aria-label={ariaLabel}\n                aria-labelledby={ariaLabelledBy}\n                className={hasCards ? 'flex items-stretch min-w-0' : 'flex items-stretch'}\n            >\n                {leading ? (\n                    <CardStripSlotContext.Provider value={PINNED_SLOT}>\n                        <div className=\"shrink-0\" style={PINNED_SLOT_STYLE}>\n                            {leading}\n                        </div>\n                    </CardStripSlotContext.Provider>\n                ) : null}\n                {hasCards ? (\n                    <div\n                        {...{ [TROUGH_ATTR]: '' }}\n                        className=\"relative min-w-0 shrink basis-auto\"\n                        style={troughStyle}\n                    >\n                        <div\n                            ref={scrollerRef}\n                            tabIndex={-1}\n                            {...{ [SCROLLER_ATTR]: '' }}\n                            data-snap={snap ? 'true' : 'false'}\n                            className={SCROLLER_CLASS}\n                        >\n                            <CardStripSlotContext.Provider value={SCROLLED_SLOT}>\n                                {cards}\n                            </CardStripSlotContext.Provider>\n                        </div>\n                        {showLeftArrow ? (\n                            <ArrowButton side=\"left\" onClick={() => scrollByStep(-1)} />\n                        ) : null}\n                        {showRightArrow ? (\n                            <ArrowButton side=\"right\" onClick={() => scrollByStep(1)} />\n                        ) : null}\n                        {fadeLeft || fadeRight ? (\n                            <div\n                                aria-hidden\n                                data-card-strip-fade=\"\"\n                                className={`${FADE_CLASS} absolute pointer-events-none`}\n                                style={{\n                                    inset: `-${TROUGH_SHOULDER_PX}px -${CARD_FLARE_PX}px 0`,\n                                    background: `linear-gradient(to right, ${fadeLeft ? FADE_COLOR : 'transparent'} 0, transparent ${FADE_RAMP_PX}px, transparent calc(100% - ${FADE_RAMP_PX}px), ${fadeRight ? FADE_COLOR : 'transparent'} 100%)`,\n                                }}\n                            />\n                        ) : null}\n                    </div>\n                ) : null}\n            </div>\n            {addTiles.length > 0 ? (\n                <div\n                    className=\"shrink-0\"\n                    style={!hasCards && leading ? EMPTY_ADD_SLOT_STYLE : undefined}\n                >\n                    {addTiles}\n                </div>\n            ) : null}\n        </div>\n    );\n};\n\nCardStrip.AddTile = AddTile;\n\nexport default CardStrip;\nexport { CardStrip };\n"],"names":["NAV_KEYS","RADIO_SELECTOR","SCROLLER_ATTR","TROUGH_ATTR","ROOT_CLASS","SCROLLER_CLASS","FADE_CLASS","ADD_TILE_CLASS","ACTIONS_SELECTOR","FOCUSABLE_SELECTOR","PREV_TABINDEX_ATTR","EDGE_EPSILON_PX","SCROLL_STEP_RATIO","scrollStepFor","scroller","first","second","pitch","visible","CARD_FLARE_PX","FADE_WIDTH_PX","ARROW_SIZE_PX","ARROW_GLYPH_PX","GUTTER_REST_PX","GUTTER_OPEN_PX","ARROW_OFFSET_PX","LIP_SHADOW","ARROW_BACKGROUND","ARROW_BORDER","TROUGH_BACKGROUND","CARD_CORNER","CARD_RADIUS","TROUGH_CORNER","TROUGH_RADIUS","TROUGH_SHOULDER_PX","FADE_RAMP_PX","SLOT_WIDTH_PX","CARD_WIDTH_PX","DIVIDER_COLOR","FADE_COLOR","ADD_HOVER_BACKGROUND","ADD_PILL_BORDER","ADD_PILL_BORDER_ACTIVE","ADD_PILL_SHADOW_DEEP","ADD_PILL_BACKGROUND","ADD_PILL_FOREGROUND","ADD_PILL_PRIMARY_BACKGROUND","ADD_PILL_PRIMARY_FOREGROUND","ADD_PILL_PRIMARY_SHADOW","BOTTOM_RULE_WEIGHT_PX","STRIP_RULE_PX","OVERFLOW_INSET_PX","CLIP_SLACK_PX","FOCUS_RING_REACH_PX","SCROLLER_CSS","STYLE_ID","prefersReducedMotion","radioValue","radio","isRadioDisabled","actionsFor","card","radioForClick","target","root","direct","node","radios","actionControls","actions","suppressTabStop","element","restoreTabStop","previous","TONE_RULE","RULE_ROW_STYLE","RULE_GAP_OVERLAP_PX","FLARE_TIP_INSET_PX","CARD_FLARE_TIP_PX","flareTips","flare","FLARE_CLASS","left","right","paintRule","tone","colour","rootRect","rootLeft","clip","cardRect","tips","tipLeft","tipRight","from","to","BLEED_STYLE","CONTENT_INSET","TROUGH_SURFACE","TROUGH_STYLE","TROUGH_GUTTER_STYLES","start","end","ADD_TILE_SHAPE_STYLE","PINNED_SLOT_STYLE","EMPTY_ADD_SLOT_STYLE","ADD_PILL_FILL","AddTile","label","icon","onClick","disabled","emphasis","className","jsx","jsxs","FOCUS_RING","PlusIcon","isAddTile","React","hidesAddTile","child","ArrowButton","side","ArrowLeftIcon","ForwardArrowIcon","CardStrip","value","onChange","children","leading","arrows","fadeEdges","snap","bleed","scrollSelectedIntoView","ariaLabel","ariaLabelledBy","style","rootRef","useRef","scrollerRef","edges","setEdges","useState","useAdoptedStyleSheet","childList","cards","wrappedAddTile","hasCards","addTiles","tile","childCount","getRadios","useCallback","getNavigableRadios","warned","warnOnce","key","message","derivedTone","setDerivedTone","useLayoutEffect","selectedCard","_b","_a","navigable","tabStop","holdsTabStop","nextTabIndex","control","values","current","selectionSettled","checked","selected","viewRect","visibleFrom","visibleTo","ruleTone","callerPaintsBackground","measure","scrollWidth","clientWidth","scrollLeft","overflows","next","onScroll","observer","scrollByStep","direction","handleKeyDown","event","enabled","currentPosition","nextPosition","delta","nextValue","handleClick","clicked","showLeftArrow","showRightArrow","fadeLeft","fadeRight","troughStyle","CardStripSlotContext","PINNED_SLOT","SCROLLED_SLOT"],"mappings":"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"}

package/dist/components/ChangeReview/ChangeReviewItem.js

@@ -0,0 +1,129 @@
+import { jsxs as a, jsx as r, Fragment as z } from "react/jsx-runtime";
+import { useState as $ } from "react";
+import { Button as b } from "../Button.js";
+import w from "../CustomIcons/SparkleIcon.js";
+import { Tag as S } from "../Tag.js";
+import C from "../Tooltip.js";
+import { Typography as n } from "../Typography/index.js";
+const N = {
+  changed: "Changed",
+  added: "Added",
+  removed: "To be removed"
+}, I = (e, t) => e === "removed" ? `Marked for removal by ${t}. Accept to remove it, or revert to keep it.` : `${N[e]} by ${t}. Accept to keep it, or revert to restore the previous value.`, R = (e) => e == null ? !0 : typeof e == "string" ? e.trim() === "" : Array.isArray(e) ? e.length === 0 : !1, P = ({
+  label: e,
+  fieldName: t,
+  before: o,
+  after: s,
+  kind: c = "changed",
+  origin: d = "assistant",
+  children: m,
+  onApprove: A,
+  onDeny: k,
+  onPreviewRevert: i,
+  disabled: p = !1,
+  className: h = ""
+}) => {
+  const [T, f] = $(!1), l = t ?? e, v = () => {
+    i !== void 0 && (f(!0), i(!0));
+  }, g = () => {
+    i !== void 0 && (f(!1), i(!1));
+  }, u = /* @__PURE__ */ a("div", { className: "flex flex-wrap items-center gap-2", children: [
+    e !== void 0 && /* @__PURE__ */ r(n.Text, { size: "small", fontWeight: "semi-bold", children: e }),
+    /* @__PURE__ */ r(C, { text: I(c, d), children: /* @__PURE__ */ r("span", { "aria-hidden": "true", children: /* @__PURE__ */ r(
+      S,
+      {
+        type: "assistant",
+        value: "AI",
+        icon: /* @__PURE__ */ r(w, { size: 11 }),
+        fontSize: "xsmall",
+        paddingSize: "compact",
+        textTransform: "none"
+      }
+    ) }) }),
+    /* @__PURE__ */ r("span", { className: "sr-only", children: `${N[c]} by ${d}` })
+  ] }), x = /* @__PURE__ */ a(z, { children: [
+    (o !== void 0 || s !== void 0) && /* @__PURE__ */ a("div", { className: "flex flex-wrap items-baseline gap-1", children: [
+      /* @__PURE__ */ a(n.SecondaryText, { size: "small", children: [
+        "Was ",
+        R(o) ? /* @__PURE__ */ r("i", { children: "empty" }) : /* @__PURE__ */ r("s", { children: o }),
+        s !== void 0 ? " →" : null
+      ] }),
+      s !== void 0 && /* @__PURE__ */ r(
+        n.Text,
+        {
+          size: "small",
+          style: { color: "var(--malachite-assistant-foreground)" },
+          children: s
+        }
+      )
+    ] }),
+    T && /* @__PURE__ */ r(n.SecondaryText, { size: "small", children: "Previewing the revert — release to keep the AI value" })
+  ] }), y = /* @__PURE__ */ a("div", { className: "flex flex-shrink-0 items-center gap-1", children: [
+    /* @__PURE__ */ a(
+      b,
+      {
+        variant: "surface",
+        size: "xsmall",
+        "aria-label": l === void 0 ? "Revert change" : `Revert ${l}`,
+        disabled: p,
+        onClick: k,
+        onMouseEnter: v,
+        onMouseLeave: g,
+        onFocus: v,
+        onBlur: g,
+        className: "hover:border-[var(--malachite-assistant-foreground)] hover:text-[var(--malachite-assistant-foreground)]",
+        children: [
+          /* @__PURE__ */ r("span", { "aria-hidden": "true", className: "mr-1", children: "↺" }),
+          "Revert"
+        ]
+      }
+    ),
+    /* @__PURE__ */ a(
+      b,
+      {
+        variant: "filled",
+        size: "xsmall",
+        "aria-label": l === void 0 ? "Accept change" : `Accept ${l}`,
+        disabled: p,
+        onClick: A,
+        children: [
+          /* @__PURE__ */ r("span", { "aria-hidden": "true", className: "mr-1", children: "✓" }),
+          "Accept"
+        ]
+      }
+    )
+  ] });
+  return m !== void 0 ? /* @__PURE__ */ a(
+    "div",
+    {
+      className: `flex flex-col gap-2 rounded-lg p-2 ${h}`,
+      style: { background: "var(--malachite-tag-assistant-background)" },
+      children: [
+        /* @__PURE__ */ a("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [
+          u,
+          y
+        ] }),
+        m,
+        /* @__PURE__ */ r("div", { className: "flex flex-col gap-1", children: x })
+      ]
+    }
+  ) : /* @__PURE__ */ a(
+    "div",
+    {
+      className: `flex items-start gap-2 rounded-lg p-2 ${h}`,
+      style: { background: "var(--malachite-tag-assistant-background)" },
+      children: [
+        /* @__PURE__ */ a("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
+          u,
+          x
+        ] }),
+        y
+      ]
+    }
+  );
+};
+export {
+  P as ChangeReviewItem,
+  P as default
+};
+//# sourceMappingURL=ChangeReviewItem.js.map

package/dist/components/ChangeReview/ChangeReviewItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChangeReviewItem.js","sources":["../../../src/components/ChangeReview/ChangeReviewItem.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport Button from '../Button';\nimport SparkleIcon from '../CustomIcons/SparkleIcon';\nimport Tag from '../Tag';\nimport Tooltip from '../Tooltip';\nimport { Typography } from '../Typography';\n\nexport type ChangeKind = 'changed' | 'added' | 'removed';\n\nexport interface ChangeReviewItemProps {\n    /**\n     * What changed — a field name, or the name of a group of them. Omit it when the field this\n     * item annotates already carries its own visible heading elsewhere on the page (so the name\n     * doesn't render twice) — pass `fieldName` instead, so the badge and actions still know what\n     * they belong to.\n     */\n    label?: string;\n    /**\n     * Names the field the badge and actions act on, for assistive tech. Defaults to `label`, so\n     * passing only `label` keeps working as before. Set it explicitly when `label` is omitted —\n     * otherwise \"Accept\"/\"Revert\" would have nothing telling a screen reader which field they act\n     * on.\n     */\n    fieldName?: string;\n    /** How it read before. A node, so a caller can show chips or code rather than a string. */\n    before?: React.ReactNode;\n    /** How it reads now. Usually omitted: the field itself is showing it. */\n    after?: React.ReactNode;\n    kind?: ChangeKind;\n    /** What made the change. Names the assistant by default. */\n    origin?: string;\n    /**\n     * The field the change is annotating. When given, the tag/label/actions form a header band\n     * above it and the before/after line moves below it, so \"Was …\" reads next to the value it\n     * describes instead of stacked with the header. Omit it for the standalone card.\n     */\n    children?: React.ReactNode;\n    onApprove: () => void;\n    onDeny: () => void;\n    /**\n     * Fires while the revert control is hovered or focused, and again when it stops being\n     * either. A callback rather than internal state because the thing being previewed — the\n     * field this change came from — lives elsewhere on the page, outside what `Item` renders;\n     * only the caller can swap what that field shows.\n     */\n    onPreviewRevert?: (previewing: boolean) => void;\n    disabled?: boolean;\n    className?: string;\n}\n\nconst KIND_WORDS: Record<ChangeKind, string> = {\n    changed: 'Changed',\n    added: 'Added',\n    removed: 'To be removed',\n};\n\n/**\n * What the \"AI\" pill means, for its tooltip. The badge is two letters, which says who wrote\n * the value but not that the reader is expected to do something about it — and the accept and\n * revert controls it refers to are hidden until the row is hovered or focused.\n */\nconst badgeTooltip = (kind: ChangeKind, origin: string): string =>\n    kind === 'removed'\n        ? `Marked for removal by ${origin}. Accept to remove it, or revert to keep it.`\n        : `${KIND_WORDS[kind]} by ${origin}. Accept to keep it, or revert to restore the previous value.`;\n\n// A multi-select with nothing chosen reaches this as `[]`, not `undefined` — that, a blank or\n// whitespace-only string, and an absent value all read as \"nothing was there\" rather than\n// printing nothing (or, worse, the literal word \"undefined\").\nconst isEmptyDisplacedValue = (value: React.ReactNode): boolean => {\n    if (value === undefined || value === null) {\n        return true;\n    }\n    if (typeof value === 'string') {\n        return value.trim() === '';\n    }\n    if (Array.isArray(value)) {\n        return value.length === 0;\n    }\n    return false;\n};\n\n/**\n * Says that something on screen was changed by a machine, shows what it displaced, and offers\n * the two ways out.\n *\n * Accept is deliberately the heavier control (filled, dark) against Revert's quiet outline —\n * the design leans toward accepting the assistant's change rather than presenting both as\n * equal options. That is the designer's call to make, not this component's.\n *\n * The actions are always visible. Revealing them on hover was tried and dropped: a change\n * waiting on a decision is the point of the row, and hiding the only two controls that\n * resolve it made them easy to miss — and unreachable on a touch screen, which has no hover\n * to reveal them with.\n */\nconst ChangeReviewItem: React.FC<ChangeReviewItemProps> = ({\n    label,\n    fieldName,\n    before,\n    after,\n    kind = 'changed',\n    origin = 'assistant',\n    children,\n    onApprove,\n    onDeny,\n    onPreviewRevert,\n    disabled = false,\n    className = '',\n}) => {\n    const [isPreviewingRevert, setIsPreviewingRevert] = useState(false);\n    const accessibleFieldName = fieldName ?? label;\n\n    // No-ops when `onPreviewRevert` is absent, which also keeps `isPreviewingRevert` from ever\n    // flipping true — so the hint below never renders unless a caller asked for the feature.\n    const startRevertPreview = () => {\n        if (onPreviewRevert === undefined) {\n            return;\n        }\n        setIsPreviewingRevert(true);\n        onPreviewRevert(true);\n    };\n\n    const endRevertPreview = () => {\n        if (onPreviewRevert === undefined) {\n            return;\n        }\n        setIsPreviewingRevert(false);\n        onPreviewRevert(false);\n    };\n\n    const badgeAndLabel = (\n        <div className=\"flex flex-wrap items-center gap-2\">\n            {label !== undefined && (\n                <Typography.Text size=\"small\" fontWeight=\"semi-bold\">\n                    {label}\n                </Typography.Text>\n            )}\n            {/* The pill itself only says \"AI\" — the fuller \"Changed by <origin>\" phrase that\n                names who made the change lives in the sr-only span beside it, so a screen\n                reader still hears the origin without the visible badge repeating it. */}\n            <Tooltip text={badgeTooltip(kind, origin)}>\n                {/* `aria-hidden` stays on the pill: the sr-only span below already carries the\n                    origin, and the tooltip repeats it for a reader who only has the badge. */}\n                <span aria-hidden=\"true\">\n                    <Tag\n                        type=\"assistant\"\n                        value=\"AI\"\n                        icon={<SparkleIcon size={11} />}\n                        fontSize=\"xsmall\"\n                        paddingSize=\"compact\"\n                        textTransform=\"none\"\n                    />\n                </span>\n            </Tooltip>\n            <span className=\"sr-only\">{`${KIND_WORDS[kind]} by ${origin}`}</span>\n        </div>\n    );\n\n    const displaysChange = before !== undefined || after !== undefined;\n\n    const beforeAfter = (\n        <>\n            {displaysChange && (\n                <div className=\"flex flex-wrap items-baseline gap-1\">\n                    <Typography.SecondaryText size=\"small\">\n                        {/* Struck through, so a glance separates what it was from what it is\n                            without having to read the labels. */}\n                        Was {isEmptyDisplacedValue(before) ? <i>empty</i> : <s>{before}</s>}\n                        {after !== undefined ? ' →' : null}\n                    </Typography.SecondaryText>\n                    {after !== undefined && (\n                        <Typography.Text\n                            size=\"small\"\n                            style={{ color: 'var(--malachite-assistant-foreground)' }}\n                        >\n                            {after}\n                        </Typography.Text>\n                    )}\n                </div>\n            )}\n            {isPreviewingRevert && (\n                <Typography.SecondaryText size=\"small\">\n                    Previewing the revert — release to keep the AI value\n                </Typography.SecondaryText>\n            )}\n        </>\n    );\n\n    // Always visible, not revealed on hover: a change waiting on a decision is the point of\n    // the row, and hiding the only two controls that resolve it behind a hover made them easy\n    // to miss entirely — and unreachable on a touch screen.\n    const actions = (\n        <div className=\"flex flex-shrink-0 items-center gap-1\">\n            <Button\n                // `surface`, not `outline`: this sits on the assistant's tinted field, and a\n                // transparent button on a tint stops reading as a button.\n                variant=\"surface\"\n                size=\"xsmall\"\n                aria-label={\n                    accessibleFieldName === undefined\n                        ? 'Revert change'\n                        : `Revert ${accessibleFieldName}`\n                }\n                disabled={disabled}\n                onClick={onDeny}\n                onMouseEnter={startRevertPreview}\n                onMouseLeave={endRevertPreview}\n                onFocus={startRevertPreview}\n                onBlur={endRevertPreview}\n                // The variant's own hover only darkens the border to grey; the mock wants\n                // Revert's border and text to pick up the assistant violet specifically.\n                className=\"hover:border-[var(--malachite-assistant-foreground)] hover:text-[var(--malachite-assistant-foreground)]\"\n            >\n                {/* Literal glyphs, not icon components: the mock sets them inline with the\n                    label at 11px, and no bundled icon reads that small without looking like a\n                    different weight than the text beside it. Reload (not a cross) because\n                    reverting restores the previous value rather than dismissing the field.\n                    The gap is a margin rather than a space: the button lays its children out\n                    with flex, which strips the leading whitespace off a bare text node. */}\n                <span aria-hidden=\"true\" className=\"mr-1\">\n                    ↺\n                </span>\n                Revert\n            </Button>\n            <Button\n                variant=\"filled\"\n                size=\"xsmall\"\n                aria-label={\n                    accessibleFieldName === undefined\n                        ? 'Accept change'\n                        : `Accept ${accessibleFieldName}`\n                }\n                disabled={disabled}\n                onClick={onApprove}\n            >\n                <span aria-hidden=\"true\" className=\"mr-1\">\n                    ✓\n                </span>\n                Accept\n            </Button>\n        </div>\n    );\n\n    // With a field to wrap, the header (tag/label/actions) and the before/after line split\n    // to opposite sides of `children` instead of sitting together above it — see the\n    // component doc comment on `children`.\n    if (children !== undefined) {\n        return (\n            <div\n                className={`flex flex-col gap-2 rounded-lg p-2 ${className}`}\n                style={{ background: 'var(--malachite-tag-assistant-background)' }}\n            >\n                <div className=\"flex flex-wrap items-center justify-between gap-2\">\n                    {badgeAndLabel}\n                    {actions}\n                </div>\n                {children}\n                <div className=\"flex flex-col gap-1\">{beforeAfter}</div>\n            </div>\n        );\n    }\n\n    return (\n        <div\n            className={`flex items-start gap-2 rounded-lg p-2 ${className}`}\n            style={{ background: 'var(--malachite-tag-assistant-background)' }}\n        >\n            <div className=\"flex min-w-0 flex-1 flex-col gap-1\">\n                {badgeAndLabel}\n                {beforeAfter}\n            </div>\n            {actions}\n        </div>\n    );\n};\n\nexport default ChangeReviewItem;\nexport { ChangeReviewItem };\n"],"names":["KIND_WORDS","badgeTooltip","kind","origin","isEmptyDisplacedValue","value","ChangeReviewItem","label","fieldName","before","after","children","onApprove","onDeny","onPreviewRevert","disabled","className","isPreviewingRevert","setIsPreviewingRevert","useState","accessibleFieldName","startRevertPreview","endRevertPreview","badgeAndLabel","jsxs","Typography","jsx","Tooltip","Tag","SparkleIcon","beforeAfter","Fragment","actions","Button"],"mappings":"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"}

package/dist/components/ChangeReview/ChangeReviewJump.js

@@ -0,0 +1,27 @@
+import { jsx as o } from "react/jsx-runtime";
+import s from "../CustomIcons/SparkleIcon.js";
+import { PillButton as l } from "../PillButton.js";
+const p = ({
+  label: t,
+  onClick: e,
+  disabled: a = !1,
+  className: i = ""
+}) => /* @__PURE__ */ o(
+  l,
+  {
+    label: t,
+    icon: /* @__PURE__ */ o(s, { size: 11 }),
+    shape: "pill",
+    size: "small",
+    tone: "assistant",
+    interactive: !!e,
+    disabled: a,
+    onClick: e,
+    className: i
+  }
+);
+export {
+  p as ChangeReviewJump,
+  p as default
+};
+//# sourceMappingURL=ChangeReviewJump.js.map

package/dist/components/ChangeReview/ChangeReviewJump.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChangeReviewJump.js","sources":["../../../src/components/ChangeReview/ChangeReviewJump.tsx"],"sourcesContent":["import type React from 'react';\nimport SparkleIcon from '../CustomIcons/SparkleIcon';\nimport PillButton from '../PillButton';\n\nexport interface ChangeReviewJumpProps {\n    /** What the chip points at, e.g. a field or capability name. */\n    label: string;\n    /** Jumps the page to what changed. Without it the chip only names the change. */\n    onClick?: () => void;\n    disabled?: boolean;\n    className?: string;\n}\n\n/**\n * A chip naming a specific change, sat at the end of an assistant message — clicking one jumps\n * to the field it touched. It renders inside a chat message but belongs to the review family,\n * since it is provenance chrome rather than conversation content.\n */\nconst ChangeReviewJump: React.FC<ChangeReviewJumpProps> = ({\n    label,\n    onClick,\n    disabled = false,\n    className = '',\n}) => (\n    <PillButton\n        label={label}\n        icon={<SparkleIcon size={11} />}\n        shape=\"pill\"\n        size=\"small\"\n        tone=\"assistant\"\n        interactive={Boolean(onClick)}\n        disabled={disabled}\n        onClick={onClick}\n        className={className}\n    />\n);\n\nexport default ChangeReviewJump;\nexport { ChangeReviewJump };\n"],"names":["ChangeReviewJump","label","onClick","disabled","className","jsx","PillButton","SparkleIcon"],"mappings":";;;AAkBA,MAAMA,IAAoD,CAAC;AAAA,EACvD,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AAChB,MACI,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACG,OAAAL;AAAA,IACA,MAAM,gBAAAI,EAACE,GAAA,EAAY,MAAM,GAAA,CAAI;AAAA,IAC7B,OAAM;AAAA,IACN,MAAK;AAAA,IACL,MAAK;AAAA,IACL,aAAa,EAAQL;AAAA,IACrB,UAAAC;AAAA,IACA,SAAAD;AAAA,IACA,WAAAE;AAAA,EAAA;AACJ;"}

package/dist/components/ChangeReview/ChangeReviewRemoved.js

@@ -0,0 +1,37 @@
+import { jsx as e, jsxs as c } from "react/jsx-runtime";
+import { Fragment as p } from "react";
+import { Typography as m } from "../Typography/index.js";
+import { ChangeReviewItem as t } from "./ChangeReviewItem.js";
+const y = ({
+  title: r = "Capability removed",
+  details: o,
+  onRestore: s,
+  onDiscard: d,
+  origin: l = "assistant",
+  disabled: i = !1,
+  className: n = ""
+}) => (
+  // The group wrapper is the card's handle: it names the whole removal for a screen reader
+  // (and for anything looking the card up), which the `Item` inside cannot do for itself.
+  /* @__PURE__ */ e("div", { role: "group", "aria-label": `${r} by ${l}`, children: /* @__PURE__ */ e(
+    t,
+    {
+      kind: "removed",
+      label: r,
+      origin: l,
+      disabled: i,
+      className: n,
+      onApprove: d,
+      onDeny: s,
+      children: /* @__PURE__ */ e("dl", { className: "m-0 grid grid-cols-[auto_1fr] gap-x-4 gap-y-1", children: o.map((a) => /* @__PURE__ */ c(p, { children: [
+        /* @__PURE__ */ e("dt", { className: "m-0", children: /* @__PURE__ */ e(m.SecondaryText, { size: "small", children: a.label }) }),
+        /* @__PURE__ */ e("dd", { className: "m-0", children: /* @__PURE__ */ e(m.Text, { size: "small", children: a.value }) })
+      ] }, a.label)) })
+    }
+  ) })
+);
+export {
+  y as ChangeReviewRemoved,
+  y as default
+};
+//# sourceMappingURL=ChangeReviewRemoved.js.map

package/dist/components/ChangeReview/ChangeReviewRemoved.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChangeReviewRemoved.js","sources":["../../../src/components/ChangeReview/ChangeReviewRemoved.tsx"],"sourcesContent":["import React, { Fragment } from 'react';\nimport { Typography } from '../Typography';\nimport ChangeReviewItem from './ChangeReviewItem';\n\nexport interface ChangeReviewRemovedDetail {\n    label: string;\n    /** A node, so a caller can show a chip or code rather than a string. */\n    value: React.ReactNode;\n}\n\nexport interface ChangeReviewRemovedProps {\n    /** The noun for what was removed. Defaults to a capability, but the component isn't\n     *  policy-specific — a caller reviewing something else names it. */\n    title?: string;\n    /** Field/value pairs describing the removed thing, so the admin can see what they would\n     *  lose before deciding. */\n    details: ChangeReviewRemovedDetail[];\n    onRestore: () => void;\n    onDiscard: () => void;\n    /** What made the removal. Names the assistant by default. */\n    origin?: string;\n    disabled?: boolean;\n    className?: string;\n}\n\n/**\n * A capability (or field, or clause — whatever the caller names it) the assistant proposed\n * removing outright. Unlike a plain `Item`, there is nothing left on screen to show the change\n * against, so this renders what the removed thing used to be.\n *\n * It IS an `Item` underneath, with the removed thing's details as its `children`. That is\n * deliberate: a removal is reviewed the same way every other change is, and a card of its own\n * design put a second visual language and a second pair of button labels in front of an admin\n * working down one column of changes. Accept removes it; revert keeps it.\n */\nconst ChangeReviewRemoved: React.FC<ChangeReviewRemovedProps> = ({\n    title = 'Capability removed',\n    details,\n    onRestore,\n    onDiscard,\n    origin = 'assistant',\n    disabled = false,\n    className = '',\n}) => (\n    // The group wrapper is the card's handle: it names the whole removal for a screen reader\n    // (and for anything looking the card up), which the `Item` inside cannot do for itself.\n    <div role=\"group\" aria-label={`${title} by ${origin}`}>\n        <ChangeReviewItem\n            kind=\"removed\"\n            label={title}\n            origin={origin}\n            disabled={disabled}\n            className={className}\n            onApprove={onDiscard}\n            onDeny={onRestore}\n        >\n            <dl className=\"m-0 grid grid-cols-[auto_1fr] gap-x-4 gap-y-1\">\n                {details.map((detail) => (\n                    <Fragment key={detail.label}>\n                        <dt className=\"m-0\">\n                            <Typography.SecondaryText size=\"small\">\n                                {detail.label}\n                            </Typography.SecondaryText>\n                        </dt>\n                        <dd className=\"m-0\">\n                            <Typography.Text size=\"small\">{detail.value}</Typography.Text>\n                        </dd>\n                    </Fragment>\n                ))}\n            </dl>\n        </ChangeReviewItem>\n    </div>\n);\n\nexport default ChangeReviewRemoved;\nexport { ChangeReviewRemoved };\n"],"names":["ChangeReviewRemoved","title","details","onRestore","onDiscard","origin","disabled","className","jsx","ChangeReviewItem","detail","jsxs","Fragment","Typography"],"mappings":";;;;AAmCA,MAAMA,IAA0D,CAAC;AAAA,EAC7D,OAAAC,IAAQ;AAAA,EACR,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AAChB;AAAA;AAAA;AAAA,EAGI,gBAAAC,EAAC,SAAI,MAAK,SAAQ,cAAY,GAAGP,CAAK,OAAOI,CAAM,IAC/C,UAAA,gBAAAG;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,MAAK;AAAA,MACL,OAAOR;AAAA,MACP,QAAAI;AAAA,MACA,UAAAC;AAAA,MACA,WAAAC;AAAA,MACA,WAAWH;AAAA,MACX,QAAQD;AAAA,MAER,UAAA,gBAAAK,EAAC,QAAG,WAAU,iDACT,YAAQ,IAAI,CAACE,MACV,gBAAAC,EAACC,GAAA,EACG,UAAA;AAAA,QAAA,gBAAAJ,EAAC,MAAA,EAAG,WAAU,OACV,UAAA,gBAAAA,EAACK,EAAW,eAAX,EAAyB,MAAK,SAC1B,UAAAH,EAAO,MAAA,CACZ,GACJ;AAAA,QACA,gBAAAF,EAAC,MAAA,EAAG,WAAU,OACV,UAAA,gBAAAA,EAACK,EAAW,MAAX,EAAgB,MAAK,SAAS,UAAAH,EAAO,MAAA,CAAM,EAAA,CAChD;AAAA,MAAA,KARWA,EAAO,KAStB,CACH,EAAA,CACL;AAAA,IAAA;AAAA,EAAA,EACJ,CACJ;AAAA;"}

package/dist/components/ChangeReview/ChangeReviewSummary.js

@@ -0,0 +1,56 @@
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import { Button as n } from "../Button.js";
+import d from "../CustomIcons/CheckIcon.js";
+import h from "../CustomIcons/SparkleIcon.js";
+import { Typography as t } from "../Typography/index.js";
+const x = ({
+  count: r,
+  origin: c = "assistant",
+  onApproveAll: o,
+  onDenyAll: m,
+  disabled: i = !1,
+  settledMessage: l,
+  className: s = ""
+}) => r <= 0 ? l === void 0 ? null : /* @__PURE__ */ a("div", { className: `flex items-center gap-2 ${s}`, children: [
+  /* @__PURE__ */ e(d, { size: 12 }),
+  /* @__PURE__ */ e(t.SecondaryText, { size: "small", children: l })
+] }) : /* @__PURE__ */ a(
+  "div",
+  {
+    className: `flex flex-wrap items-center gap-2 rounded-lg p-2 ${s}`,
+    style: { background: "var(--malachite-tag-assistant-background)" },
+    children: [
+      /* @__PURE__ */ e(
+        h,
+        {
+          size: 12,
+          style: { color: "var(--malachite-assistant-foreground)" }
+        }
+      ),
+      /* @__PURE__ */ e(
+        t.Text,
+        {
+          size: "small",
+          fontWeight: "semi-bold",
+          style: { color: "var(--malachite-assistant-foreground)" },
+          children: `${r} ${r === 1 ? "change" : "changes"} from the ${c} ${r === 1 ? "needs" : "need"} review`
+        }
+      ),
+      /* @__PURE__ */ a("div", { className: "ml-auto flex items-center gap-2", children: [
+        /* @__PURE__ */ a(n, { variant: "surface", size: "small", disabled: i, onClick: m, children: [
+          /* @__PURE__ */ e("span", { "aria-hidden": "true", className: "mr-1", children: "↺" }),
+          "Revert all"
+        ] }),
+        /* @__PURE__ */ a(n, { variant: "filled", size: "small", disabled: i, onClick: o, children: [
+          /* @__PURE__ */ e("span", { "aria-hidden": "true", className: "mr-1", children: "✓" }),
+          "Accept all"
+        ] })
+      ] })
+    ]
+  }
+);
+export {
+  x as ChangeReviewSummary,
+  x as default
+};
+//# sourceMappingURL=ChangeReviewSummary.js.map

package/dist/components/ChangeReview/ChangeReviewSummary.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChangeReviewSummary.js","sources":["../../../src/components/ChangeReview/ChangeReviewSummary.tsx"],"sourcesContent":["import type React from 'react';\nimport Button from '../Button';\nimport CheckIcon from '../CustomIcons/CheckIcon';\nimport SparkleIcon from '../CustomIcons/SparkleIcon';\nimport { Typography } from '../Typography';\n\nexport interface ChangeReviewSummaryProps {\n    /** How many changes are still undecided. */\n    count: number;\n    /** What made them. Names the assistant by default. */\n    origin?: string;\n    onApproveAll: () => void;\n    onDenyAll: () => void;\n    disabled?: boolean;\n    /**\n     * What to say once nothing is outstanding. Omit and the bar renders nothing, which is what\n     * a caller wants when the space should collapse rather than reassure.\n     */\n    settledMessage?: string;\n    className?: string;\n}\n\n/**\n * How many machine-made changes are still waiting on a decision, and the two ways to settle\n * all of them at once.\n *\n * The count is the point: a per-field control cannot tell you that something is pending in a\n * tab you are not looking at, and this is what blocks a save until the number reaches zero.\n */\nconst ChangeReviewSummary: React.FC<ChangeReviewSummaryProps> = ({\n    count,\n    origin = 'assistant',\n    onApproveAll,\n    onDenyAll,\n    disabled = false,\n    settledMessage,\n    className = '',\n}) => {\n    if (count <= 0) {\n        if (settledMessage === undefined) {\n            return null;\n        }\n\n        return (\n            <div className={`flex items-center gap-2 ${className}`}>\n                <CheckIcon size={12} />\n                <Typography.SecondaryText size=\"small\">{settledMessage}</Typography.SecondaryText>\n            </div>\n        );\n    }\n\n    return (\n        <div\n            className={`flex flex-wrap items-center gap-2 rounded-lg p-2 ${className}`}\n            style={{ background: 'var(--malachite-tag-assistant-background)' }}\n        >\n            {/* Coloured explicitly: the glyph inherits `currentColor`, which on this bar is\n                the default text colour, so it drew near-black beside its own violet label. */}\n            <SparkleIcon\n                size={12}\n                style={{ color: 'var(--malachite-assistant-foreground)' }}\n            />\n            <Typography.Text\n                size=\"small\"\n                fontWeight=\"semi-bold\"\n                style={{ color: 'var(--malachite-assistant-foreground)' }}\n            >\n                {`${count} ${count === 1 ? 'change' : 'changes'} from the ${origin} ${\n                    count === 1 ? 'needs' : 'need'\n                } review`}\n            </Typography.Text>\n            <div className=\"ml-auto flex items-center gap-2\">\n                {/* The same glyphs the per-field controls carry, so the bar reads as the\n                    bulk form of those two actions rather than as a separate pair. The gap is\n                    a margin, not a space: Button lays its children out with flex, which\n                    strips the leading whitespace off a bare text node. */}\n                {/* `surface` for the same reason the per-field Revert uses it: the bar has its\n                    own violet ground, and a transparent button on it stops reading as one. */}\n                <Button variant=\"surface\" size=\"small\" disabled={disabled} onClick={onDenyAll}>\n                    <span aria-hidden=\"true\" className=\"mr-1\">\n                        ↺\n                    </span>\n                    Revert all\n                </Button>\n                <Button variant=\"filled\" size=\"small\" disabled={disabled} onClick={onApproveAll}>\n                    <span aria-hidden=\"true\" className=\"mr-1\">\n                        ✓\n                    </span>\n                    Accept all\n                </Button>\n            </div>\n        </div>\n    );\n};\n\nexport default ChangeReviewSummary;\nexport { ChangeReviewSummary };\n"],"names":["ChangeReviewSummary","count","origin","onApproveAll","onDenyAll","disabled","settledMessage","className","jsxs","jsx","CheckIcon","Typography","SparkleIcon","Button"],"mappings":";;;;;AA6BA,MAAMA,IAA0D,CAAC;AAAA,EAC7D,OAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,cAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,gBAAAC;AAAA,EACA,WAAAC,IAAY;AAChB,MACQN,KAAS,IACLK,MAAmB,SACZ,OAIP,gBAAAE,EAAC,OAAA,EAAI,WAAW,2BAA2BD,CAAS,IAChD,UAAA;AAAA,EAAA,gBAAAE,EAACC,GAAA,EAAU,MAAM,GAAA,CAAI;AAAA,oBACpBC,EAAW,eAAX,EAAyB,MAAK,SAAS,UAAAL,EAAA,CAAe;AAAA,GAC3D,IAKJ,gBAAAE;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,WAAW,oDAAoDD,CAAS;AAAA,IACxE,OAAO,EAAE,YAAY,4CAAA;AAAA,IAIrB,UAAA;AAAA,MAAA,gBAAAE;AAAA,QAACG;AAAA,QAAA;AAAA,UACG,MAAM;AAAA,UACN,OAAO,EAAE,OAAO,wCAAA;AAAA,QAAwC;AAAA,MAAA;AAAA,MAE5D,gBAAAH;AAAA,QAACE,EAAW;AAAA,QAAX;AAAA,UACG,MAAK;AAAA,UACL,YAAW;AAAA,UACX,OAAO,EAAE,OAAO,wCAAA;AAAA,UAEf,UAAA,GAAGV,CAAK,IAAIA,MAAU,IAAI,WAAW,SAAS,aAAaC,CAAM,IAC9DD,MAAU,IAAI,UAAU,MAC5B;AAAA,QAAA;AAAA,MAAA;AAAA,MAEJ,gBAAAO,EAAC,OAAA,EAAI,WAAU,mCAOX,UAAA;AAAA,QAAA,gBAAAA,EAACK,KAAO,SAAQ,WAAU,MAAK,SAAQ,UAAAR,GAAoB,SAASD,GAChE,UAAA;AAAA,UAAA,gBAAAK,EAAC,QAAA,EAAK,eAAY,QAAO,WAAU,QAAO,UAAA,KAE1C;AAAA,UAAO;AAAA,QAAA,GAEX;AAAA,QACA,gBAAAD,EAACK,KAAO,SAAQ,UAAS,MAAK,SAAQ,UAAAR,GAAoB,SAASF,GAC/D,UAAA;AAAA,UAAA,gBAAAM,EAAC,QAAA,EAAK,eAAY,QAAO,WAAU,QAAO,UAAA,KAE1C;AAAA,UAAO;AAAA,QAAA,EAAA,CAEX;AAAA,MAAA,EAAA,CACJ;AAAA,IAAA;AAAA,EAAA;AAAA;"}

package/dist/components/ChangeReview/index.js

@@ -0,0 +1,15 @@
+import { ChangeReviewItem as e } from "./ChangeReviewItem.js";
+import { ChangeReviewJump as m } from "./ChangeReviewJump.js";
+import { ChangeReviewRemoved as o } from "./ChangeReviewRemoved.js";
+import { ChangeReviewSummary as r } from "./ChangeReviewSummary.js";
+const v = {
+  Item: e,
+  Summary: r,
+  Removed: o,
+  Jump: m
+};
+export {
+  v as ChangeReview,
+  v as default
+};
+//# sourceMappingURL=index.js.map

package/dist/components/ChangeReview/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/ChangeReview/index.tsx"],"sourcesContent":["import ChangeReviewItem from './ChangeReviewItem';\nimport ChangeReviewJump from './ChangeReviewJump';\nimport ChangeReviewRemoved from './ChangeReviewRemoved';\nimport ChangeReviewSummary from './ChangeReviewSummary';\n\nexport type { ChangeKind, ChangeReviewItemProps } from './ChangeReviewItem';\nexport type { ChangeReviewJumpProps } from './ChangeReviewJump';\nexport type { ChangeReviewRemovedDetail, ChangeReviewRemovedProps } from './ChangeReviewRemoved';\nexport type { ChangeReviewSummaryProps } from './ChangeReviewSummary';\n\n/**\n * Reviewing changes a machine made: one note per changed thing, a card for what it removed\n * outright, a bar counting what is still outstanding, and a chip pointing at any of it from\n * elsewhere on the page.\n */\nexport const ChangeReview = {\n    Item: ChangeReviewItem,\n    Summary: ChangeReviewSummary,\n    Removed: ChangeReviewRemoved,\n    Jump: ChangeReviewJump,\n};\n\nexport default ChangeReview;\n"],"names":["ChangeReview","ChangeReviewItem","ChangeReviewSummary","ChangeReviewRemoved","ChangeReviewJump"],"mappings":";;;;AAeO,MAAMA,IAAe;AAAA,EACxB,MAAMC;AAAA,EACN,SAASC;AAAA,EACT,SAASC;AAAA,EACT,MAAMC;AACV;"}

package/dist/components/Chat/ChatComposer.js

@@ -0,0 +1,100 @@
+import { jsxs as f, jsx as e } from "react/jsx-runtime";
+import { Button as a } from "../Button.js";
+import w from "../CustomIcons/ArrowUpIcon.js";
+import z from "../CustomIcons/DisabledIcon.js";
+import C from "../TextArea/TextArea.js";
+const I = ({
+  value: n,
+  onChange: p,
+  onSend: l,
+  onStop: x,
+  busy: t = !1,
+  disabled: s = !1,
+  placeholder: h = "Ask anything",
+  maxLength: u,
+  rows: v = 2,
+  maxRows: b = 6,
+  sendPlacement: d = "in-field",
+  tone: g = "default",
+  children: c,
+  "aria-label": k = "Message",
+  className: y = ""
+}) => {
+  const o = !s && !t && n.trim().length > 0, i = t ? x : void 0, m = /* @__PURE__ */ e(
+    C,
+    {
+      name: "chat-composer",
+      "aria-label": k,
+      placeholder: h,
+      value: n,
+      onChange: p,
+      onKeyDown: (r) => {
+        r.key === "Enter" && !r.shiftKey && (r.preventDefault(), o && l());
+      },
+      disabled: s,
+      rows: v,
+      maxRows: b,
+      maxLength: u,
+      resize: "none",
+      size: "small",
+      tone: g,
+      inFieldAction: d !== "in-field" ? void 0 : i ? (
+        // Round, and labelled only for assistive tech and on hover: the field it
+        // sits in is the whole context a send button needs.
+        /* @__PURE__ */ e(
+          a,
+          {
+            variant: "outline",
+            size: "small",
+            iconOnly: !0,
+            radius: "xl",
+            icon: /* @__PURE__ */ e(z, { size: 13 }),
+            tooltip: "Stop",
+            "aria-label": "Stop",
+            onClick: i
+          }
+        )
+      ) : /* @__PURE__ */ e(
+        a,
+        {
+          variant: "filled",
+          size: "small",
+          iconOnly: !0,
+          radius: "xl",
+          disabled: !o,
+          icon: /* @__PURE__ */ e(w, { size: 12 }),
+          tooltip: "Send",
+          "aria-label": "Send",
+          onClick: l
+        }
+      )
+    }
+  );
+  return /* @__PURE__ */ f(
+    "div",
+    {
+      className: `flex shrink-0 flex-col p-4 ${y}`,
+      style: {
+        backgroundColor: "var(--malachite-card-background)",
+        boxShadow: "0 -4px 6px -4px var(--malachite-card-shadow)"
+      },
+      children: [
+        d === "beside" ? /* @__PURE__ */ f("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ e("div", { className: "min-w-0 flex-1", children: m }),
+          i ? /* @__PURE__ */ e(a, { variant: "outline", size: "large", onClick: i, children: "Stop" }) : /* @__PURE__ */ e(a, { variant: "filled", size: "large", disabled: !o, onClick: l, children: "Send" })
+        ] }) : m,
+        c ? (
+          // Flush against the field and to its trailing edge, inset by the field's own
+          // corner radius so no tab sits under the curve, and wrapping rather than
+          // crushing its contents when the column is narrow.
+          /* @__PURE__ */ e("div", { className: "flex flex-wrap items-start justify-end gap-2 px-[var(--malachite-radius-xl,12px)]", children: c })
+        ) : null
+      ]
+    }
+  );
+};
+export {
+  I as ChatComposer,
+  I as default
+};
+//# sourceMappingURL=ChatComposer.js.map

package/dist/components/Chat/ChatComposer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatComposer.js","sources":["../../../src/components/Chat/ChatComposer.tsx"],"sourcesContent":["import React from 'react';\nimport Button from '../Button';\nimport ArrowUpIcon from '../CustomIcons/ArrowUpIcon';\nimport DisabledIcon from '../CustomIcons/DisabledIcon';\nimport { TextArea } from '../TextArea';\n\nexport interface ChatComposerProps {\n    value: string;\n    onChange: (value: string) => void;\n    onSend: () => void;\n    /** Offered in place of send while `busy`. Without it, send is simply disabled. */\n    onStop?: () => void;\n    /** A reply is streaming. */\n    busy?: boolean;\n    disabled?: boolean;\n    placeholder?: string;\n    maxLength?: number;\n    rows?: number;\n    /**\n     * How many lines the field grows to before it scrolls internally instead of growing\n     * further. Defaults well above `rows` so the field grows by default rather than staying\n     * fixed at its starting height — a consumer that genuinely wants a static box passes\n     * `maxRows` equal to `rows`.\n     */\n    maxRows?: number;\n    /**\n     * `'in-field'` (the default, so no existing consumer moves) nests a round send button\n     * inside the field, trailing the text. `'beside'` matches the policy design instead: a\n     * plain field with a labelled `Send` button to its right. Either way the field stays a\n     * `TextArea` — the mock draws a single-line input, but a composer that cannot take a\n     * second line is a downgrade, and `TextArea` already owns the Enter-to-send convention.\n     */\n    sendPlacement?: 'in-field' | 'beside';\n    /**\n     * `'assistant'` marks the field itself as AI-owned chrome: its focus border recolours to\n     * the assistant violet instead of the default accent. Defaults to `'default'` — an AI\n     * surface (e.g. the playground) opts in deliberately rather than inheriting it silently.\n     */\n    tone?: 'default' | 'assistant';\n    /** Controls belonging with the composer — a model picker, a token meter. */\n    children?: React.ReactNode;\n    'aria-label'?: string;\n    className?: string;\n}\n\n/**\n * The message box. Owns the send affordance and the Enter/Shift+Enter convention so every\n * chat surface submits the same way.\n *\n * `shrink-0` keeps it at its natural height inside a `Chat`, so a growing transcript takes\n * the remaining space instead of squeezing the box a reader is typing into.\n */\nconst ChatComposer: React.FC<ChatComposerProps> = ({\n    value,\n    onChange,\n    onSend,\n    onStop,\n    busy = false,\n    disabled = false,\n    placeholder = 'Ask anything',\n    maxLength,\n    rows = 2,\n    maxRows = 6,\n    sendPlacement = 'in-field',\n    tone = 'default',\n    children,\n    'aria-label': ariaLabel = 'Message',\n    className = '',\n}) => {\n    const sendable = !disabled && !busy && value.trim().length > 0;\n    // Kept as a handler rather than a plain boolean so TypeScript narrows `onStop` to\n    // defined wherever this is truthy, instead of requiring a non-null assertion below.\n    const stopHandler = busy ? onStop : undefined;\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {\n        if (event.key === 'Enter' && !event.shiftKey) {\n            event.preventDefault();\n\n            if (sendable) {\n                onSend();\n            }\n        }\n    };\n\n    const field = (\n        <TextArea\n            name=\"chat-composer\"\n            aria-label={ariaLabel}\n            placeholder={placeholder}\n            value={value}\n            onChange={onChange}\n            onKeyDown={handleKeyDown}\n            disabled={disabled}\n            rows={rows}\n            maxRows={maxRows}\n            maxLength={maxLength}\n            resize=\"none\"\n            size=\"small\"\n            tone={tone}\n            inFieldAction={\n                sendPlacement !== 'in-field' ? undefined : stopHandler ? (\n                    // Round, and labelled only for assistive tech and on hover: the field it\n                    // sits in is the whole context a send button needs.\n                    <Button\n                        variant=\"outline\"\n                        size=\"small\"\n                        iconOnly\n                        radius=\"xl\"\n                        icon={<DisabledIcon size={13} />}\n                        tooltip=\"Stop\"\n                        aria-label=\"Stop\"\n                        onClick={stopHandler}\n                    />\n                ) : (\n                    <Button\n                        variant=\"filled\"\n                        size=\"small\"\n                        iconOnly\n                        radius=\"xl\"\n                        disabled={!sendable}\n                        icon={<ArrowUpIcon size={12} />}\n                        tooltip=\"Send\"\n                        aria-label=\"Send\"\n                        onClick={onSend}\n                    />\n                )\n            }\n        />\n    );\n\n    return (\n        <div\n            className={`flex shrink-0 flex-col p-4 ${className}`}\n            // Opaque and shadowed rather than bordered, mirroring `Chat.Header`: pinned to\n            // the foot of a transcript that scrolls behind it, the composer has to hide what\n            // passes under it, and a drawn line reads as a seam where a shadow does not.\n            style={{\n                backgroundColor: 'var(--malachite-card-background)',\n                boxShadow: '0 -4px 6px -4px var(--malachite-card-shadow)',\n            }}\n        >\n            {sendPlacement === 'beside' ? (\n                <div className=\"flex items-center gap-2\">\n                    <div className=\"min-w-0 flex-1\">{field}</div>\n                    {/* `large` (42px) matches the field's own height; the smaller tiers\n                        (28px, 32px) leave the button visibly short beside it. */}\n                    {stopHandler ? (\n                        <Button variant=\"outline\" size=\"large\" onClick={stopHandler}>\n                            Stop\n                        </Button>\n                    ) : (\n                        <Button variant=\"filled\" size=\"large\" disabled={!sendable} onClick={onSend}>\n                            Send\n                        </Button>\n                    )}\n                </div>\n            ) : (\n                field\n            )}\n            {children ? (\n                // Flush against the field and to its trailing edge, inset by the field's own\n                // corner radius so no tab sits under the curve, and wrapping rather than\n                // crushing its contents when the column is narrow.\n                <div className=\"flex flex-wrap items-start justify-end gap-2 px-[var(--malachite-radius-xl,12px)]\">\n                    {children}\n                </div>\n            ) : null}\n        </div>\n    );\n};\n\nexport default ChatComposer;\nexport { ChatComposer };\n"],"names":["ChatComposer","value","onChange","onSend","onStop","busy","disabled","placeholder","maxLength","rows","maxRows","sendPlacement","tone","children","ariaLabel","className","sendable","stopHandler","field","jsx","TextArea","event","Button","DisabledIcon","ArrowUpIcon","jsxs"],"mappings":";;;;;AAoDA,MAAMA,IAA4C,CAAC;AAAA,EAC/C,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,QAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,UAAAC,IAAW;AAAA,EACX,aAAAC,IAAc;AAAA,EACd,WAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,SAAAC,IAAU;AAAA,EACV,eAAAC,IAAgB;AAAA,EAChB,MAAAC,IAAO;AAAA,EACP,UAAAC;AAAA,EACA,cAAcC,IAAY;AAAA,EAC1B,WAAAC,IAAY;AAChB,MAAM;AACF,QAAMC,IAAW,CAACV,KAAY,CAACD,KAAQJ,EAAM,KAAA,EAAO,SAAS,GAGvDgB,IAAcZ,IAAOD,IAAS,QAY9Bc,IACF,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,MAAK;AAAA,MACL,cAAYN;AAAA,MACZ,aAAAP;AAAA,MACA,OAAAN;AAAA,MACA,UAAAC;AAAA,MACA,WAjBc,CAACmB,MAAoD;AACvE,QAAIA,EAAM,QAAQ,WAAW,CAACA,EAAM,aAChCA,EAAM,eAAA,GAEFL,KACAb,EAAA;AAAA,MAGZ;AAAA,MAUQ,UAAAG;AAAA,MACA,MAAAG;AAAA,MACA,SAAAC;AAAA,MACA,WAAAF;AAAA,MACA,QAAO;AAAA,MACP,MAAK;AAAA,MACL,MAAAI;AAAA,MACA,eACID,MAAkB,aAAa,SAAYM;AAAA;AAAA;AAAA,QAGvC,gBAAAE;AAAA,UAACG;AAAA,UAAA;AAAA,YACG,SAAQ;AAAA,YACR,MAAK;AAAA,YACL,UAAQ;AAAA,YACR,QAAO;AAAA,YACP,MAAM,gBAAAH,EAACI,GAAA,EAAa,MAAM,GAAA,CAAI;AAAA,YAC9B,SAAQ;AAAA,YACR,cAAW;AAAA,YACX,SAASN;AAAA,UAAA;AAAA,QAAA;AAAA,UAGb,gBAAAE;AAAA,QAACG;AAAA,QAAA;AAAA,UACG,SAAQ;AAAA,UACR,MAAK;AAAA,UACL,UAAQ;AAAA,UACR,QAAO;AAAA,UACP,UAAU,CAACN;AAAA,UACX,MAAM,gBAAAG,EAACK,GAAA,EAAY,MAAM,GAAA,CAAI;AAAA,UAC7B,SAAQ;AAAA,UACR,cAAW;AAAA,UACX,SAASrB;AAAA,QAAA;AAAA,MAAA;AAAA,IACb;AAAA,EAAA;AAMhB,SACI,gBAAAsB;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAW,8BAA8BV,CAAS;AAAA,MAIlD,OAAO;AAAA,QACH,iBAAiB;AAAA,QACjB,WAAW;AAAA,MAAA;AAAA,MAGd,UAAA;AAAA,QAAAJ,MAAkB,WACf,gBAAAc,EAAC,OAAA,EAAI,WAAU,2BACX,UAAA;AAAA,UAAA,gBAAAN,EAAC,OAAA,EAAI,WAAU,kBAAkB,UAAAD,GAAM;AAAA,UAGtCD,sBACIK,GAAA,EAAO,SAAQ,WAAU,MAAK,SAAQ,SAASL,GAAa,UAAA,OAAA,CAE7D,sBAECK,GAAA,EAAO,SAAQ,UAAS,MAAK,SAAQ,UAAU,CAACN,GAAU,SAASb,GAAQ,UAAA,OAAA,CAE5E;AAAA,QAAA,EAAA,CAER,IAEAe;AAAA,QAEHL;AAAA;AAAA;AAAA;AAAA,UAIG,gBAAAM,EAAC,OAAA,EAAI,WAAU,qFACV,UAAAN,EAAA,CACL;AAAA,YACA;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGhB;"}

package/dist/components/Chat/ChatComposerChip.js

@@ -0,0 +1,28 @@
+import { jsx as i } from "react/jsx-runtime";
+import { PillButton as l } from "../PillButton.js";
+const f = ({
+  label: o,
+  icon: a,
+  trailingIcon: e,
+  onClick: t,
+  disabled: s = !1,
+  className: r = ""
+}) => /* @__PURE__ */ i(
+  l,
+  {
+    label: o,
+    icon: a,
+    trailingIcon: e,
+    shape: "tab",
+    size: "small",
+    interactive: !!t,
+    disabled: s,
+    onClick: t,
+    className: r
+  }
+);
+export {
+  f as ChatComposerChip,
+  f as default
+};
+//# sourceMappingURL=ChatComposerChip.js.map