@keboola/design 11.6.1 → 12.0.0

package/dist/{Card-Dyo7055Q.js → Card-Cr9MBNHu.js}

@@ -1,5 +1,5 @@
 import { cn } from "./classNames-BzrkDnOD.js";
-import { useArgoDesign } from "./context-D7X470dy.js";
+import { useArgoDesign } from "./context-U293r3v-.js";
 import { cva } from "class-variance-authority";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/Card/styles.ts
@@ -13,7 +13,7 @@ const cardClassnames = cva([
 	defaultVariants: { padding: "small" },
 	variants: {
 		bordered: {
-			true: "tw:border tw:border-solid tw:border-neutral-200 tw:data-[argo=true]:border-border",
+			true: "tw:border tw:border-solid tw:border-border",
 			false: "tw:shadow-raised tw:data-[argo=true]:shadow-sm"
 		},
 		padding: {
@@ -31,7 +31,7 @@ const cardHeaderClassnames = cva("tw:flex", {
 	},
 	variants: {
 		divider: {
-			true: "tw:min-h-16 tw:border-b tw:border-neutral-200 tw:px-6 tw:py-2 tw:data-[argo=true]:border-border",
+			true: "tw:min-h-16 tw:border-b tw:border-border tw:px-6 tw:py-2",
 			false: ""
 		},
 		layout: {
@@ -102,4 +102,4 @@ Card.Title = CardTitle;
 //#endregion
 export { Card };
 
-//# sourceMappingURL=Card-Dyo7055Q.js.map
+//# sourceMappingURL=Card-Cr9MBNHu.js.map

package/dist/Card-Cr9MBNHu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card-Cr9MBNHu.js","names":[],"sources":["../src/components/Card/styles.ts","../src/components/Card/CardContent.tsx","../src/components/Card/CardHeader.tsx","../src/components/Card/CardTitle.tsx","../src/components/Card/Card.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority';\n\nimport { cn } from '../../utils';\n\nexport const cardClassnames = cva(\n  ['tw:flex', 'tw:flex-col', 'tw:rounded-lg', 'tw:bg-card', 'tw:text-card-foreground'],\n  {\n    defaultVariants: {\n      padding: 'small',\n    },\n    variants: {\n      bordered: {\n        true: 'tw:border tw:border-solid tw:border-border',\n        false: 'tw:shadow-raised tw:data-[argo=true]:shadow-sm',\n      },\n      // `none` drops the gap too: slots own their padding, so a gap would\n      // double-space a `Card.Header divider`.\n      padding: {\n        none: 'tw:p-0',\n        small: 'tw:gap-4 tw:px-6 tw:py-4',\n        medium: 'tw:gap-4 tw:p-7',\n        large: 'tw:gap-4 tw:p-8',\n      },\n    },\n  },\n);\n\nexport const cardHeaderClassnames = cva('tw:flex', {\n  defaultVariants: {\n    divider: false,\n    layout: 'row',\n  },\n  variants: {\n    // No `border-solid`: it would give the other sides a 3px `medium` border.\n    // `min-h-16` holds one height with or without a button; keep padding under it.\n    divider: {\n      true: 'tw:min-h-16 tw:border-b tw:border-border tw:px-6 tw:py-2',\n      false: '',\n    },\n    layout: {\n      row: 'tw:items-center tw:justify-between tw:gap-4',\n      inline: 'tw:items-center tw:gap-3',\n      stack: 'tw:flex-col tw:gap-1.5',\n    },\n  },\n});\n\nexport const cardContentClassnames = cva('', {\n  defaultVariants: {\n    padded: false,\n  },\n  variants: {\n    padded: {\n      true: 'tw:px-6 tw:py-5',\n      false: '',\n    },\n  },\n});\n\nexport const cardTitleClassnames = cn(\n  'tw:m-0',\n  'tw:leading-6',\n  'tw:font-medium',\n  'tw:text-base',\n  'tw:text-card-foreground',\n);\n","import type { HTMLAttributes } from 'react';\n\nimport { cardContentClassnames } from './styles';\n\ntype Props = HTMLAttributes<HTMLDivElement> & {\n  /** Applies the standard body padding. Use with `Card padding=\"none\"`, where the\n   *  root adds none — otherwise the padding is doubled. */\n  padded?: boolean;\n};\n\nexport const CardContent = ({ children, className, padded = false, ...rest }: Props) => (\n  // `|| undefined` so an unpadded, unstyled content slot stays attribute-free\n  // rather than rendering `class=\"\"`.\n  <div {...rest} className={cardContentClassnames({ className, padded }) || undefined}>\n    {children}\n  </div>\n);\n","import type { HTMLAttributes } from 'react';\n\nimport { useArgoDesign } from '../ThemeProvider/context';\n\nimport { cardHeaderClassnames } from './styles';\n\ntype Props = HTMLAttributes<HTMLDivElement> & {\n  /** Bottom rule plus own padding and a 64px min height. Full-bleed only with `Card padding=\"none\"`. */\n  divider?: boolean;\n  /** `row`: title left, actions right. `inline`: together, e.g. title + badge.\n   *  `stack`: description under the title. */\n  layout?: 'row' | 'inline' | 'stack';\n};\n\nexport const CardHeader = ({\n  children,\n  className,\n  divider = false,\n  layout = 'row',\n  ...rest\n}: Props) => {\n  const renderArgo = useArgoDesign();\n  return (\n    <div\n      {...rest}\n      data-argo={renderArgo}\n      className={cardHeaderClassnames({ className, divider, layout })}\n    >\n      {children}\n    </div>\n  );\n};\n","import type { HTMLAttributes } from 'react';\n\nimport { cn } from '../../utils';\n\nimport { cardTitleClassnames } from './styles';\n\ntype HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n\ntype Props = HTMLAttributes<HTMLHeadingElement> & {\n  /** Heading tag to render. Defaults to `h3`; set explicitly to avoid a heading-order skip\n   *  (e.g. `as=\"h2\"` when the Card sits directly under a page's `h1`). */\n  as?: HeadingLevel;\n};\n\nexport const CardTitle = ({ children, className, as: Tag = 'h3', ...rest }: Props) => (\n  <Tag className={cn(cardTitleClassnames, className)} {...rest}>\n    {children}\n  </Tag>\n);\n","import type { HTMLAttributes } from 'react';\nimport type { VariantProps } from 'class-variance-authority';\n\nimport { useArgoDesign } from '../ThemeProvider/context';\n\nimport { CardContent } from './CardContent';\nimport { CardHeader } from './CardHeader';\nimport { CardTitle } from './CardTitle';\nimport { cardClassnames } from './styles';\n\ntype Props = HTMLAttributes<HTMLDivElement> & VariantProps<typeof cardClassnames>;\n\nexport const Card = ({\n  children,\n  className,\n  bordered = false,\n  padding = 'small',\n  ...rest\n}: Props) => {\n  const renderArgo = useArgoDesign();\n  return (\n    <div\n      {...rest}\n      data-argo={renderArgo}\n      className={cardClassnames({ className, bordered, padding })}\n    >\n      {children}\n    </div>\n  );\n};\n\nCard.Header = CardHeader;\nCard.Content = CardContent;\nCard.Title = CardTitle;\n"],"mappings":";;;;;AAIA,MAAa,iBAAiB,IAC5B;CAAC;CAAW;CAAe;CAAiB;CAAc;AAAyB,GACnF;CACE,iBAAiB,EACf,SAAS,QACX;CACA,UAAU;EACR,UAAU;GACR,MAAM;GACN,OAAO;EACT;EAGA,SAAS;GACP,MAAM;GACN,OAAO;GACP,QAAQ;GACR,OAAO;EACT;CACF;AACF,CACF;AAEA,MAAa,uBAAuB,IAAI,WAAW;CACjD,iBAAiB;EACf,SAAS;EACT,QAAQ;CACV;CACA,UAAU;EAGR,SAAS;GACP,MAAM;GACN,OAAO;EACT;EACA,QAAQ;GACN,KAAK;GACL,QAAQ;GACR,OAAO;EACT;CACF;AACF,CAAC;AAED,MAAa,wBAAwB,IAAI,IAAI;CAC3C,iBAAiB,EACf,QAAQ,MACV;CACA,UAAU,EACR,QAAQ;EACN,MAAM;EACN,OAAO;CACT,EACF;AACF,CAAC;AAED,MAAa,sBAAsB,GACjC,UACA,gBACA,kBACA,gBACA,yBACF;;;ACvDA,MAAa,eAAe,EAAE,UAAU,WAAW,SAAS,OAAO,GAAG,WAGpE,oBAAC,OAAD;CAAK,GAAI;CAAM,WAAW,sBAAsB;EAAE;EAAW;CAAO,CAAC,KAAK,KAAA;CACvE;AACE,CAAA;;;ACDP,MAAa,cAAc,EACzB,UACA,WACA,UAAU,OACV,SAAS,OACT,GAAG,WACQ;CACX,MAAM,aAAa,cAAc;CACjC,OACE,oBAAC,OAAD;EACE,GAAI;EACJ,aAAW;EACX,WAAW,qBAAqB;GAAE;GAAW;GAAS;EAAO,CAAC;EAE7D;CACE,CAAA;AAET;;;ACjBA,MAAa,aAAa,EAAE,UAAU,WAAW,IAAI,MAAM,MAAM,GAAG,WAClE,oBAAC,KAAD;CAAK,WAAW,GAAG,qBAAqB,SAAS;CAAG,GAAI;CACrD;AACE,CAAA;;;ACLP,MAAa,QAAQ,EACnB,UACA,WACA,WAAW,OACX,UAAU,SACV,GAAG,WACQ;CACX,MAAM,aAAa,cAAc;CACjC,OACE,oBAAC,OAAD;EACE,GAAI;EACJ,aAAW;EACX,WAAW,eAAe;GAAE;GAAW;GAAU;EAAQ,CAAC;EAEzD;CACE,CAAA;AAET;AAEA,KAAK,SAAS;AACd,KAAK,UAAU;AACf,KAAK,QAAQ"}

package/dist/{Checkbox-Bqr6zXcW.js → Checkbox-8yIIgY7g.js}

@@ -1,7 +1,7 @@
 import { cn } from "./classNames-BzrkDnOD.js";
-import { Tooltip } from "./utils-DnkrFYqY.js";
-import { useArgoDesign } from "./context-D7X470dy.js";
-import { Check, Minus } from "./icons-Cek151jC.js";
+import { Tooltip } from "./utils-Bd28bWgm.js";
+import { useArgoDesign } from "./context-U293r3v-.js";
+import { Check, Minus } from "./icons-wcA70iQx.js";
 import { FieldBox } from "./FieldBox-D7DYtX_m.js";
 import { useId } from "react";
 import { cva } from "class-variance-authority";
@@ -94,4 +94,4 @@ function Checkbox({ className, id: idProp, children, description, variant, posit
 //#endregion
 export { Checkbox };
 
-//# sourceMappingURL=Checkbox-Bqr6zXcW.js.map
+//# sourceMappingURL=Checkbox-8yIIgY7g.js.map

package/dist/Checkbox-8yIIgY7g.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox-8yIIgY7g.js","names":[],"sources":["../src/components/Checkbox/styles.ts","../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority';\n\nexport const rootVariants = cva(\n  [\n    // reset\n    'tailwindcss-preflight',\n\n    // position\n    'tw:flex',\n    'tw:items-center',\n    'tw:justify-center',\n\n    'tw:peer',\n    'tw:size-4',\n    'tw:shrink-0',\n    'tw:cursor-pointer',\n\n    // border\n    'tw:border',\n    'tw:border-solid',\n\n    // disabled\n    'tw:disabled:opacity-50',\n    'tw:disabled:cursor-not-allowed',\n  ],\n  {\n    defaultVariants: {\n      variant: 'default',\n    },\n    variants: {\n      variant: {\n        default: [\n          'tw:rounded',\n          'tw:border-neutral-200',\n\n          'tw:data-[state=checked]:bg-primary',\n          'tw:data-[state=checked]:border-primary',\n\n          'tw:data-[state=indeterminate]:bg-white',\n          'tw:data-[state=indeterminate]:border-neutral-200',\n        ],\n        argo: [\n          'tw:rounded',\n          'tw:border-input',\n          'tw:transition-colors',\n\n          'tw:data-[state=checked]:bg-primary',\n          'tw:data-[state=checked]:border-primary',\n\n          'tw:data-[state=indeterminate]:bg-primary',\n          'tw:data-[state=indeterminate]:border-primary',\n\n          // focus\n          'tw:focus-visible:outline-hidden',\n          'tw:focus-visible:border-primary',\n          'tw:focus-visible:ring-2',\n          'tw:focus-visible:ring-ring/50',\n        ],\n      },\n    },\n  },\n);\n\nexport const indicatorVariants = cva(['tw:group', 'tw:flex', 'tw:items-center'], {\n  defaultVariants: {\n    variant: 'default',\n  },\n  variants: {\n    variant: {\n      default: [\n        'tw:data-[state=checked]:text-primary-foreground',\n        'tw:data-[state=indeterminate]:text-neutral-200',\n      ],\n      argo: ['tw:text-primary-foreground'],\n    },\n  },\n});\n","import { useId } from 'react';\nimport type { ComponentProps, ReactNode } from 'react';\nimport type { CheckedState } from '@radix-ui/react-checkbox';\nimport { Indicator, Root } from '@radix-ui/react-checkbox';\nimport type { VariantProps } from 'class-variance-authority';\n\nimport { Check, Minus } from '../../icons';\nimport { cn } from '../../utils';\nimport { FieldBox } from '../FieldBox';\nimport type { fieldBoxVariants } from '../FieldBox/styles';\nimport { useArgoDesign } from '../ThemeProvider/context';\nimport type { Props as TooltipProps } from '../Tooltip';\nimport { Tooltip } from '../Tooltip';\n\nimport { indicatorVariants, rootVariants } from './styles';\n\ntype Props = {\n  id?: string | number;\n  description?: ReactNode;\n  variant?: VariantProps<typeof fieldBoxVariants>['variant'];\n  position?: 'start' | 'end';\n  tooltip?: TooltipProps['tooltip'];\n  tooltipPlacement?: TooltipProps['placement'];\n} & Omit<ComponentProps<typeof Root>, 'id'>;\n\nexport function Checkbox(\n  prop: Omit<Props, 'checked' | 'onCheckedChange'> & {\n    checked?: boolean;\n    onCheckedChange?: (checked: boolean) => void;\n  },\n): ReactNode;\n\nexport function Checkbox(\n  prop: Omit<Props, 'checked' | 'onCheckedChange'> & {\n    checked?: CheckedState;\n    onCheckedChange?: (checked: CheckedState) => void;\n  },\n): ReactNode;\n\nexport function Checkbox({\n  className,\n  id: idProp,\n  children,\n  description,\n  variant,\n  position,\n  tooltip,\n  tooltipPlacement = 'top',\n  ...rest\n}: Props) {\n  const fallbackId = useId();\n  const id = idProp?.toString() ?? fallbackId;\n  const styleVariant = useArgoDesign() ? 'argo' : 'default';\n\n  const checkboxElement = (\n    <Root id={id} {...rest} className={cn(rootVariants({ variant: styleVariant, className }))}>\n      <Indicator className={cn(indicatorVariants({ variant: styleVariant }))}>\n        <Check className=\"tw:hidden tw:size-3 tw:stroke-[4px] tw:group-data-[state=checked]:block\" />\n        <Minus className=\"tw:hidden tw:size-3 tw:stroke-[4px] tw:group-data-[state=indeterminate]:block\" />\n      </Indicator>\n    </Root>\n  );\n\n  const rendered = !children ? (\n    checkboxElement\n  ) : (\n    <FieldBox htmlFor={id} variant={variant} position={position} control={checkboxElement}>\n      <FieldBox.Title>{children}</FieldBox.Title>\n      {description && <FieldBox.Description>{description}</FieldBox.Description>}\n    </FieldBox>\n  );\n\n  if (!tooltip) return rendered;\n\n  // `asChild` only onto the labelled FieldBox: on the bare Radix `Root` the tooltip's\n  // `data-state` overwrites the checkbox's and it stops toggling.\n  return (\n    <Tooltip tooltip={tooltip} placement={tooltipPlacement} triggerAsChild={!!children}>\n      {rendered}\n    </Tooltip>\n  );\n}\n"],"mappings":";;;;;;;;;;AAEA,MAAa,eAAe,IAC1B;CAEE;CAGA;CACA;CACA;CAEA;CACA;CACA;CACA;CAGA;CACA;CAGA;CACA;AACF,GACA;CACE,iBAAiB,EACf,SAAS,UACX;CACA,UAAU,EACR,SAAS;EACP,SAAS;GACP;GACA;GAEA;GACA;GAEA;GACA;EACF;EACA,MAAM;GACJ;GACA;GACA;GAEA;GACA;GAEA;GACA;GAGA;GACA;GACA;GACA;EACF;CACF,EACF;AACF,CACF;AAEA,MAAa,oBAAoB,IAAI;CAAC;CAAY;CAAW;AAAiB,GAAG;CAC/E,iBAAiB,EACf,SAAS,UACX;CACA,UAAU,EACR,SAAS;EACP,SAAS,CACP,mDACA,gDACF;EACA,MAAM,CAAC,4BAA4B;CACrC,EACF;AACF,CAAC;;;ACrCD,SAAgB,SAAS,EACvB,WACA,IAAI,QACJ,UACA,aACA,SACA,UACA,SACA,mBAAmB,OACnB,GAAG,QACK;CACR,MAAM,aAAa,MAAM;CACzB,MAAM,KAAK,QAAQ,SAAS,KAAK;CACjC,MAAM,eAAe,cAAc,IAAI,SAAS;CAEhD,MAAM,kBACJ,oBAAC,MAAD;EAAU;EAAI,GAAI;EAAM,WAAW,GAAG,aAAa;GAAE,SAAS;GAAc;EAAU,CAAC,CAAC;EACtF,UAAA,qBAAC,WAAD;GAAW,WAAW,GAAG,kBAAkB,EAAE,SAAS,aAAa,CAAC,CAAC;GAArE,UAAA,CACE,oBAAC,OAAD,EAAO,WAAU,0EAA2E,CAAA,GAC5F,oBAAC,OAAD,EAAO,WAAU,gFAAiF,CAAA,CACzF;;CACP,CAAA;CAGR,MAAM,WAAW,CAAC,WAChB,kBAEA,qBAAC,UAAD;EAAU,SAAS;EAAa;EAAmB;EAAU,SAAS;EAAtE,UAAA,CACE,oBAAC,SAAS,OAAV,EAAiB,SAAyB,CAAA,GACzC,eAAe,oBAAC,SAAS,aAAV,EAAA,UAAuB,YAAkC,CAAA,CACjE;;CAGZ,IAAI,CAAC,SAAS,OAAO;CAIrB,OACE,oBAAC,SAAD;EAAkB;EAAS,WAAW;EAAkB,gBAAgB,CAAC,CAAC;EACvE,UAAA;CACM,CAAA;AAEb"}

package/dist/{Clipboard-C2YBRfD8.js → Clipboard-_xf6hMDD.js}

@@ -1,5 +1,5 @@
 import { cn } from "./classNames-BzrkDnOD.js";
-import { Tooltip, copyToClipboard } from "./utils-DnkrFYqY.js";
+import { Tooltip, copyToClipboard } from "./utils-Bd28bWgm.js";
 import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Clipboard/Clipboard.tsx
@@ -55,4 +55,4 @@ const Clipboard = ({ ref, text: textProp, children, tooltip = "Copy to Clipboard
 //#endregion
 export { Clipboard };
 
-//# sourceMappingURL=Clipboard-C2YBRfD8.js.map
+//# sourceMappingURL=Clipboard-_xf6hMDD.js.map

package/dist/{Clipboard-C2YBRfD8.js.map → Clipboard-_xf6hMDD.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Clipboard-C2YBRfD8.js","names":[],"sources":["../src/components/Clipboard/Clipboard.tsx"],"sourcesContent":["import { useState } from 'react';\nimport type { ComponentProps, MouseEventHandler } from 'react';\n\nimport { cn, copyToClipboard } from '../../utils';\nimport { type Props as TooltipProps, Tooltip } from '../Tooltip';\n\ntype Props = {\n  tooltip?: TooltipProps['tooltip'];\n  tooltipPlacement?: TooltipProps['placement'];\n  tooltipVariant?: TooltipProps['variant'];\n  asChild?: TooltipProps['triggerAsChild'];\n  text?: string | (() => string);\n} & ComponentProps<'button'>;\n\nexport const Clipboard = ({\n  ref,\n  text: textProp,\n  children,\n  tooltip = 'Copy to Clipboard',\n  tooltipPlacement = 'top',\n  tooltipVariant: tooltipVariantProp = 'action',\n  asChild = false,\n  onClick,\n  className,\n  ...restButtonProps\n}: Props) => {\n  const [isTooltipOpen, setIsTooltipOpen] = useState(false);\n  const [state, setState] = useState<'ready' | 'copied' | 'error'>('ready');\n  const text = typeof textProp === 'function' ? textProp() : textProp;\n\n  const copy = async (text: string) => {\n    try {\n      // For the clipboard feature to work reliably, the window must be in focus for security reasons.\n      // However, the button can be clicked without the window being focused.\n      if (!document.hasFocus()) window.focus();\n\n      await copyToClipboard(text);\n      setState('copied');\n    } catch {\n      setState('error');\n    }\n  };\n\n  const handleOnClick: MouseEventHandler<HTMLButtonElement> = (event) => {\n    // Open on click rather than waiting for hover. Radix opens on pointer-enter via a\n    // `delayDuration` timer (300ms here), so clicking faster than that left the outcome invisible\n    // until the timer caught up — the message was already rendered, just inside a closed tooltip.\n    setIsTooltipOpen(true);\n    if (text && state === 'ready') void copy(text);\n    onClick?.(event);\n  };\n\n  const handleOnOpenChange: ComponentProps<typeof Tooltip.Root>['onOpenChange'] = (open) => {\n    // Reset when the tooltip closes, allowing the user to leave the copy button.\n    if (!open && state !== 'ready') setState('ready');\n    setIsTooltipOpen(open);\n  };\n\n  const tooltipContent = (() => {\n    if (!text) return 'Nothing to copy';\n    if (state === 'error') return 'Failed to copy';\n    if (state === 'copied') return 'Copied to Clipboard';\n    return tooltip;\n  })();\n\n  const tooltipVariant: TooltipProps['variant'] =\n    state === 'ready' && !!text ? tooltipVariantProp : 'action';\n\n  // `tooltip={null}` leaves nothing to say until there is an outcome. Not rendering `Content` at all\n  // is what makes that work: hovering still opens the tooltip, there is simply nothing in it, and\n  // the copied / failed message appears in place the moment `state` changes. It also keeps Radix\n  // from pointing the trigger's `aria-describedby` at content that has no text.\n  const hasTooltipContent = tooltipContent !== null && tooltipContent !== undefined;\n\n  return (\n    <Tooltip.Root open={isTooltipOpen} onOpenChange={handleOnOpenChange}>\n      <Tooltip.Trigger\n        {...restButtonProps}\n        asChild={asChild}\n        keepOpenOnClick\n        onClick={handleOnClick}\n        className={cn('tw:cursor-pointer', className)}\n        ref={ref}\n      >\n        {children ?? text}\n      </Tooltip.Trigger>\n\n      {hasTooltipContent && (\n        <Tooltip.Content\n          keepOpenOnPointerDownOutside\n          placement={tooltipPlacement}\n          variant={tooltipVariant}\n        >\n          {tooltipContent}\n        </Tooltip.Content>\n      )}\n    </Tooltip.Root>\n  );\n};\n"],"mappings":";;;;;AAcA,MAAa,aAAa,EACxB,KACA,MAAM,UACN,UACA,UAAU,qBACV,mBAAmB,OACnB,gBAAgB,qBAAqB,UACrC,UAAU,OACV,SACA,WACA,GAAG,sBACQ;CACX,MAAM,CAAC,eAAe,oBAAoB,SAAS,KAAK;CACxD,MAAM,CAAC,OAAO,YAAY,SAAuC,OAAO;CACxE,MAAM,OAAO,OAAO,aAAa,aAAa,SAAS,IAAI;CAE3D,MAAM,OAAO,OAAO,SAAiB;EACnC,IAAI;GAGF,IAAI,CAAC,SAAS,SAAS,GAAG,OAAO,MAAM;GAEvC,MAAM,gBAAgB,IAAI;GAC1B,SAAS,QAAQ;EACnB,QAAQ;GACN,SAAS,OAAO;EAClB;CACF;CAEA,MAAM,iBAAuD,UAAU;EAIrE,iBAAiB,IAAI;EACrB,IAAI,QAAQ,UAAU,SAAS,KAAU,IAAI;EAC7C,UAAU,KAAK;CACjB;CAEA,MAAM,sBAA2E,SAAS;EAExF,IAAI,CAAC,QAAQ,UAAU,SAAS,SAAS,OAAO;EAChD,iBAAiB,IAAI;CACvB;CAEA,MAAM,wBAAwB;EAC5B,IAAI,CAAC,MAAM,OAAO;EAClB,IAAI,UAAU,SAAS,OAAO;EAC9B,IAAI,UAAU,UAAU,OAAO;EAC/B,OAAO;CACT,EAAA,CAAG;CAEH,MAAM,iBACJ,UAAU,WAAW,CAAC,CAAC,OAAO,qBAAqB;CAMrD,MAAM,oBAAoB,mBAAmB,QAAQ,mBAAmB,KAAA;CAExE,OACE,qBAAC,QAAQ,MAAT;EAAc,MAAM;EAAe,cAAc;EAAjD,UAAA,CACE,oBAAC,QAAQ,SAAT;GACE,GAAI;GACK;GACT,iBAAA;GACA,SAAS;GACT,WAAW,GAAG,qBAAqB,SAAS;GACvC;GAEJ,UAAA,YAAY;EACE,CAAA,GAEhB,qBACC,oBAAC,QAAQ,SAAT;GACE,8BAAA;GACA,WAAW;GACX,SAAS;GAER,UAAA;EACc,CAAA,CAEP;;AAElB"}
+{"version":3,"file":"Clipboard-_xf6hMDD.js","names":[],"sources":["../src/components/Clipboard/Clipboard.tsx"],"sourcesContent":["import { useState } from 'react';\nimport type { ComponentProps, MouseEventHandler } from 'react';\n\nimport { cn, copyToClipboard } from '../../utils';\nimport { type Props as TooltipProps, Tooltip } from '../Tooltip';\n\ntype Props = {\n  tooltip?: TooltipProps['tooltip'];\n  tooltipPlacement?: TooltipProps['placement'];\n  tooltipVariant?: TooltipProps['variant'];\n  asChild?: TooltipProps['triggerAsChild'];\n  text?: string | (() => string);\n} & ComponentProps<'button'>;\n\nexport const Clipboard = ({\n  ref,\n  text: textProp,\n  children,\n  tooltip = 'Copy to Clipboard',\n  tooltipPlacement = 'top',\n  tooltipVariant: tooltipVariantProp = 'action',\n  asChild = false,\n  onClick,\n  className,\n  ...restButtonProps\n}: Props) => {\n  const [isTooltipOpen, setIsTooltipOpen] = useState(false);\n  const [state, setState] = useState<'ready' | 'copied' | 'error'>('ready');\n  const text = typeof textProp === 'function' ? textProp() : textProp;\n\n  const copy = async (text: string) => {\n    try {\n      // For the clipboard feature to work reliably, the window must be in focus for security reasons.\n      // However, the button can be clicked without the window being focused.\n      if (!document.hasFocus()) window.focus();\n\n      await copyToClipboard(text);\n      setState('copied');\n    } catch {\n      setState('error');\n    }\n  };\n\n  const handleOnClick: MouseEventHandler<HTMLButtonElement> = (event) => {\n    // Open on click rather than waiting for hover. Radix opens on pointer-enter via a\n    // `delayDuration` timer (300ms here), so clicking faster than that left the outcome invisible\n    // until the timer caught up — the message was already rendered, just inside a closed tooltip.\n    setIsTooltipOpen(true);\n    if (text && state === 'ready') void copy(text);\n    onClick?.(event);\n  };\n\n  const handleOnOpenChange: ComponentProps<typeof Tooltip.Root>['onOpenChange'] = (open) => {\n    // Reset when the tooltip closes, allowing the user to leave the copy button.\n    if (!open && state !== 'ready') setState('ready');\n    setIsTooltipOpen(open);\n  };\n\n  const tooltipContent = (() => {\n    if (!text) return 'Nothing to copy';\n    if (state === 'error') return 'Failed to copy';\n    if (state === 'copied') return 'Copied to Clipboard';\n    return tooltip;\n  })();\n\n  const tooltipVariant: TooltipProps['variant'] =\n    state === 'ready' && !!text ? tooltipVariantProp : 'action';\n\n  // `tooltip={null}` leaves nothing to say until there is an outcome. Not rendering `Content` at all\n  // is what makes that work: hovering still opens the tooltip, there is simply nothing in it, and\n  // the copied / failed message appears in place the moment `state` changes. It also keeps Radix\n  // from pointing the trigger's `aria-describedby` at content that has no text.\n  const hasTooltipContent = tooltipContent !== null && tooltipContent !== undefined;\n\n  return (\n    <Tooltip.Root open={isTooltipOpen} onOpenChange={handleOnOpenChange}>\n      <Tooltip.Trigger\n        {...restButtonProps}\n        asChild={asChild}\n        keepOpenOnClick\n        onClick={handleOnClick}\n        className={cn('tw:cursor-pointer', className)}\n        ref={ref}\n      >\n        {children ?? text}\n      </Tooltip.Trigger>\n\n      {hasTooltipContent && (\n        <Tooltip.Content\n          keepOpenOnPointerDownOutside\n          placement={tooltipPlacement}\n          variant={tooltipVariant}\n        >\n          {tooltipContent}\n        </Tooltip.Content>\n      )}\n    </Tooltip.Root>\n  );\n};\n"],"mappings":";;;;;AAcA,MAAa,aAAa,EACxB,KACA,MAAM,UACN,UACA,UAAU,qBACV,mBAAmB,OACnB,gBAAgB,qBAAqB,UACrC,UAAU,OACV,SACA,WACA,GAAG,sBACQ;CACX,MAAM,CAAC,eAAe,oBAAoB,SAAS,KAAK;CACxD,MAAM,CAAC,OAAO,YAAY,SAAuC,OAAO;CACxE,MAAM,OAAO,OAAO,aAAa,aAAa,SAAS,IAAI;CAE3D,MAAM,OAAO,OAAO,SAAiB;EACnC,IAAI;GAGF,IAAI,CAAC,SAAS,SAAS,GAAG,OAAO,MAAM;GAEvC,MAAM,gBAAgB,IAAI;GAC1B,SAAS,QAAQ;EACnB,QAAQ;GACN,SAAS,OAAO;EAClB;CACF;CAEA,MAAM,iBAAuD,UAAU;EAIrE,iBAAiB,IAAI;EACrB,IAAI,QAAQ,UAAU,SAAS,KAAU,IAAI;EAC7C,UAAU,KAAK;CACjB;CAEA,MAAM,sBAA2E,SAAS;EAExF,IAAI,CAAC,QAAQ,UAAU,SAAS,SAAS,OAAO;EAChD,iBAAiB,IAAI;CACvB;CAEA,MAAM,wBAAwB;EAC5B,IAAI,CAAC,MAAM,OAAO;EAClB,IAAI,UAAU,SAAS,OAAO;EAC9B,IAAI,UAAU,UAAU,OAAO;EAC/B,OAAO;CACT,EAAA,CAAG;CAEH,MAAM,iBACJ,UAAU,WAAW,CAAC,CAAC,OAAO,qBAAqB;CAMrD,MAAM,oBAAoB,mBAAmB,QAAQ,mBAAmB,KAAA;CAExE,OACE,qBAAC,QAAQ,MAAT;EAAc,MAAM;EAAe,cAAc;EAAjD,UAAA,CACE,oBAAC,QAAQ,SAAT;GACE,GAAI;GACK;GACT,iBAAA;GACA,SAAS;GACT,WAAW,GAAG,qBAAqB,SAAS;GACvC;GAEJ,UAAA,YAAY;EACE,CAAA,GAEhB,qBACC,oBAAC,QAAQ,SAAT;GACE,8BAAA;GACA,WAAW;GACX,SAAS;GAER,UAAA;EACc,CAAA,CAEP;;AAElB"}

package/dist/{ClipboardButton-CrljClL1.js → ClipboardButton-DHa1trtI.js}

@@ -1,6 +1,6 @@
-import { Copy } from "./icons-Cek151jC.js";
-import { Button, ButtonInline } from "./Button-DsRrU5F1.js";
-import { Clipboard } from "./Clipboard-C2YBRfD8.js";
+import { Copy } from "./icons-wcA70iQx.js";
+import { Button, ButtonInline } from "./Button-Ca4Q3VJU.js";
+import { Clipboard } from "./Clipboard-_xf6hMDD.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/blocks/ClipboardButton/ClipboardButton.tsx
 const DEFAULT_ICON = /* @__PURE__ */ jsx(Copy, {});
@@ -40,4 +40,4 @@ const ClipboardInline = ({ text, tooltip, tooltipPlacement, tooltipVariant, chil
 //#endregion
 export { ClipboardButton, ClipboardInline };
 
-//# sourceMappingURL=ClipboardButton-CrljClL1.js.map
+//# sourceMappingURL=ClipboardButton-DHa1trtI.js.map

package/dist/{ClipboardButton-CrljClL1.js.map → ClipboardButton-DHa1trtI.js.map}

@@ -1 +1 @@
-{"version":3,"file":"ClipboardButton-CrljClL1.js","names":[],"sources":["../src/blocks/ClipboardButton/ClipboardButton.tsx","../src/blocks/ClipboardButton/ClipboardInline.tsx"],"sourcesContent":["import type { ComponentProps, ReactNode } from 'react';\n\nimport { Button } from '../../components/Button';\nimport { Clipboard } from '../../components/Clipboard';\nimport { Copy } from '../../icons';\n\ntype ClipboardProps = Pick<\n  ComponentProps<typeof Clipboard>,\n  'text' | 'tooltip' | 'tooltipPlacement' | 'tooltipVariant'\n>;\n\ntype ButtonProps = Omit<ComponentProps<typeof Button>, 'disabled' | 'icon'>;\n\ntype Props = ClipboardProps & ButtonProps & { icon?: ReactNode };\n\nconst DEFAULT_ICON: ReactNode = <Copy />;\nconst DEFAULT_ARIA_LABEL = 'Copy';\n\nexport const ClipboardButton = ({\n  // clipboard props\n  text,\n  tooltip,\n  tooltipPlacement,\n  tooltipVariant,\n\n  // button props\n  icon = DEFAULT_ICON,\n  variant = 'outline',\n  children,\n  ...rest\n}: Props) => {\n  // Icon-only (no text children): the `tooltip` is visual only, not an accessible\n  // name, so fall back to it (when it's a string) or a sensible default. A\n  // consumer-supplied `aria-label` in `rest` still wins.\n  // A non-empty string tooltip names the action; an empty/absent tooltip still\n  // needs a name, so fall back to the default rather than an empty aria-label.\n  const defaultAriaLabel =\n    typeof tooltip === 'string' && tooltip.trim() ? tooltip : DEFAULT_ARIA_LABEL;\n  const ariaLabel = rest['aria-label'] ?? (children == null ? defaultAriaLabel : undefined);\n\n  return (\n    <Clipboard\n      asChild\n      tooltip={tooltip}\n      tooltipPlacement={tooltipPlacement}\n      tooltipVariant={tooltipVariant}\n      text={text}\n    >\n      <Button {...rest} aria-label={ariaLabel} variant={variant} disabled={!text}>\n        {icon}\n        {children}\n      </Button>\n    </Clipboard>\n  );\n};\n","import type { ComponentProps } from 'react';\n\nimport { ButtonInline } from '../../components/Button';\nimport { Clipboard } from '../../components/Clipboard';\nimport { Copy } from '../../icons';\n\ntype ClipboardProps = Pick<\n  ComponentProps<typeof Clipboard>,\n  'text' | 'tooltip' | 'tooltipPlacement' | 'tooltipVariant'\n>;\n\ntype ButtonProps = Omit<ComponentProps<typeof ButtonInline>, 'disabled'>;\n\ntype Props = { hideIcon?: boolean } & ClipboardProps & ButtonProps;\n\nexport const ClipboardInline = ({\n  // clipboard props\n  text,\n  tooltip,\n  tooltipPlacement,\n  tooltipVariant,\n\n  // button props\n  children = 'Copy To Clipboard',\n  hideIcon = false,\n  ...rest\n}: Props) => (\n  <Clipboard\n    asChild\n    text={text}\n    tooltip={tooltip}\n    tooltipPlacement={tooltipPlacement}\n    tooltipVariant={tooltipVariant}\n  >\n    <ButtonInline {...rest} disabled={!text}>\n      {!hideIcon && <Copy className=\"tw:size-4\" />}\n      {children}\n    </ButtonInline>\n  </Clipboard>\n);\n"],"mappings":";;;;;AAeA,MAAM,eAA0B,oBAAC,MAAD,CAAO,CAAA;AACvC,MAAM,qBAAqB;AAE3B,MAAa,mBAAmB,EAE9B,MACA,SACA,kBACA,gBAGA,OAAO,cACP,UAAU,WACV,UACA,GAAG,WACQ;CAMX,MAAM,mBACJ,OAAO,YAAY,YAAY,QAAQ,KAAK,IAAI,UAAU;CAC5D,MAAM,YAAY,KAAK,kBAAkB,YAAY,OAAO,mBAAmB,KAAA;CAE/E,OACE,oBAAC,WAAD;EACE,SAAA;EACS;EACS;EACF;EACV;EAEN,UAAA,qBAAC,QAAD;GAAQ,GAAI;GAAM,cAAY;GAAoB;GAAS,UAAU,CAAC;GAAtE,UAAA,CACG,MACA,QACK;;CACC,CAAA;AAEf;;;ACvCA,MAAa,mBAAmB,EAE9B,MACA,SACA,kBACA,gBAGA,WAAW,qBACX,WAAW,OACX,GAAG,WAEH,oBAAC,WAAD;CACE,SAAA;CACM;CACG;CACS;CACF;CAEhB,UAAA,qBAAC,cAAD;EAAc,GAAI;EAAM,UAAU,CAAC;EAAnC,UAAA,CACG,CAAC,YAAY,oBAAC,MAAD,EAAM,WAAU,YAAa,CAAA,GAC1C,QACW;;AACL,CAAA"}
+{"version":3,"file":"ClipboardButton-DHa1trtI.js","names":[],"sources":["../src/blocks/ClipboardButton/ClipboardButton.tsx","../src/blocks/ClipboardButton/ClipboardInline.tsx"],"sourcesContent":["import type { ComponentProps, ReactNode } from 'react';\n\nimport { Button } from '../../components/Button';\nimport { Clipboard } from '../../components/Clipboard';\nimport { Copy } from '../../icons';\n\ntype ClipboardProps = Pick<\n  ComponentProps<typeof Clipboard>,\n  'text' | 'tooltip' | 'tooltipPlacement' | 'tooltipVariant'\n>;\n\ntype ButtonProps = Omit<ComponentProps<typeof Button>, 'disabled' | 'icon'>;\n\ntype Props = ClipboardProps & ButtonProps & { icon?: ReactNode };\n\nconst DEFAULT_ICON: ReactNode = <Copy />;\nconst DEFAULT_ARIA_LABEL = 'Copy';\n\nexport const ClipboardButton = ({\n  // clipboard props\n  text,\n  tooltip,\n  tooltipPlacement,\n  tooltipVariant,\n\n  // button props\n  icon = DEFAULT_ICON,\n  variant = 'outline',\n  children,\n  ...rest\n}: Props) => {\n  // Icon-only (no text children): the `tooltip` is visual only, not an accessible\n  // name, so fall back to it (when it's a string) or a sensible default. A\n  // consumer-supplied `aria-label` in `rest` still wins.\n  // A non-empty string tooltip names the action; an empty/absent tooltip still\n  // needs a name, so fall back to the default rather than an empty aria-label.\n  const defaultAriaLabel =\n    typeof tooltip === 'string' && tooltip.trim() ? tooltip : DEFAULT_ARIA_LABEL;\n  const ariaLabel = rest['aria-label'] ?? (children == null ? defaultAriaLabel : undefined);\n\n  return (\n    <Clipboard\n      asChild\n      tooltip={tooltip}\n      tooltipPlacement={tooltipPlacement}\n      tooltipVariant={tooltipVariant}\n      text={text}\n    >\n      <Button {...rest} aria-label={ariaLabel} variant={variant} disabled={!text}>\n        {icon}\n        {children}\n      </Button>\n    </Clipboard>\n  );\n};\n","import type { ComponentProps } from 'react';\n\nimport { ButtonInline } from '../../components/Button';\nimport { Clipboard } from '../../components/Clipboard';\nimport { Copy } from '../../icons';\n\ntype ClipboardProps = Pick<\n  ComponentProps<typeof Clipboard>,\n  'text' | 'tooltip' | 'tooltipPlacement' | 'tooltipVariant'\n>;\n\ntype ButtonProps = Omit<ComponentProps<typeof ButtonInline>, 'disabled'>;\n\ntype Props = { hideIcon?: boolean } & ClipboardProps & ButtonProps;\n\nexport const ClipboardInline = ({\n  // clipboard props\n  text,\n  tooltip,\n  tooltipPlacement,\n  tooltipVariant,\n\n  // button props\n  children = 'Copy To Clipboard',\n  hideIcon = false,\n  ...rest\n}: Props) => (\n  <Clipboard\n    asChild\n    text={text}\n    tooltip={tooltip}\n    tooltipPlacement={tooltipPlacement}\n    tooltipVariant={tooltipVariant}\n  >\n    <ButtonInline {...rest} disabled={!text}>\n      {!hideIcon && <Copy className=\"tw:size-4\" />}\n      {children}\n    </ButtonInline>\n  </Clipboard>\n);\n"],"mappings":";;;;;AAeA,MAAM,eAA0B,oBAAC,MAAD,CAAO,CAAA;AACvC,MAAM,qBAAqB;AAE3B,MAAa,mBAAmB,EAE9B,MACA,SACA,kBACA,gBAGA,OAAO,cACP,UAAU,WACV,UACA,GAAG,WACQ;CAMX,MAAM,mBACJ,OAAO,YAAY,YAAY,QAAQ,KAAK,IAAI,UAAU;CAC5D,MAAM,YAAY,KAAK,kBAAkB,YAAY,OAAO,mBAAmB,KAAA;CAE/E,OACE,oBAAC,WAAD;EACE,SAAA;EACS;EACS;EACF;EACV;EAEN,UAAA,qBAAC,QAAD;GAAQ,GAAI;GAAM,cAAY;GAAoB;GAAS,UAAU,CAAC;GAAtE,UAAA,CACG,MACA,QACK;;CACC,CAAA;AAEf;;;ACvCA,MAAa,mBAAmB,EAE9B,MACA,SACA,kBACA,gBAGA,WAAW,qBACX,WAAW,OACX,GAAG,WAEH,oBAAC,WAAD;CACE,SAAA;CACM;CACG;CACS;CACF;CAEhB,UAAA,qBAAC,cAAD;EAAc,GAAI;EAAM,UAAU,CAAC;EAAnC,UAAA,CACG,CAAC,YAAY,oBAAC,MAAD,EAAM,WAAU,YAAa,CAAA,GAC1C,QACW;;AACL,CAAA"}

package/dist/{CodeEditor-C9AS8Ch0.js → CodeEditor-BSo-oLFG.js}

@@ -1,19 +1,19 @@
 import { cn } from "./classNames-BzrkDnOD.js";
-import { isMac, keyCodes } from "./utils-DnkrFYqY.js";
-import { useArgoDesign } from "./context-D7X470dy.js";
-import { findLiteralMatches } from "./findLiteralMatches-BGBw8Vbl.js";
-import { ClipboardButton } from "./ClipboardButton-CrljClL1.js";
+import { isMac, keyCodes } from "./utils-Bd28bWgm.js";
+import { useArgoDesign } from "./context-U293r3v-.js";
+import { findLiteralMatches } from "./findLiteralMatches-DgGLzyG0.js";
+import { ClipboardButton } from "./ClipboardButton-DHa1trtI.js";
 import { useStableCallback } from "./internal/hooks/useStableCallback.js";
 import { HelpBlock } from "./internal/components/HelpBlock.js";
-import { Kbd } from "./Kbd-D1Azcc4g.js";
-import { resolveToken, useThemeAttributes } from "./themeTokens-qP1-55O7.js";
+import { useThemeAttributes } from "./useThemeAttributes-B199Regy.js";
+import { Kbd } from "./Kbd-J4n1J6i4.js";
+import { resolveToken } from "./themeTokens-7DEab0kp.js";
 import { useEffect, useLayoutEffect, useMemo, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { autocompletion, completeAnyWord } from "@codemirror/autocomplete";
 import { unifiedMergeView } from "@codemirror/merge";
 import { Decoration, EditorView, ViewPlugin, keymap, placeholder, tooltips } from "@codemirror/view";
 import CodeMirror, { EditorState } from "@uiw/react-codemirror";
-import colors from "@keboola/tailwind-config/colors";
 import { javascript } from "@codemirror/lang-javascript";
 import { json, jsonParseLinter } from "@codemirror/lang-json";
 import { python } from "@codemirror/lang-python";
@@ -25,6 +25,7 @@ import { toml } from "@codemirror/legacy-modes/mode/toml";
 import { linter } from "@codemirror/lint";
 import { githubDarkInit, githubLightInit } from "@uiw/codemirror-theme-github";
 import { getSqlLanguageSupport } from "@keboola/codemirror-lang-sql";
+import colors from "@keboola/tailwind-config/colors";
 import { simpleMode } from "@codemirror/legacy-modes/mode/simple-mode";
 import { tags } from "@lezer/highlight";
 import { Compartment, StateEffect, StateField } from "@codemirror/state";
@@ -200,15 +201,9 @@ const dbt = simpleMode({
 //#endregion
 //#region src/components/CodeEditor/modes/jsonnet.ts
 /**
-* Ported from google/codemirror-mode-jsonnet (Apache-2.0), the mode written by
-* the language's own authors, which was never taken past CodeMirror 5.
-* CodeMirror 5 style names are replaced by their CodeMirror 6 highlight tags:
-* `string-2` is `escape`, `error` is `invalid`.
+* Port of google/codemirror-mode-jsonnet (Apache-2.0) to CodeMirror 6 tags.
 *
-* Every pattern is anchored and hoisted. `StringStream.match` slices the rest of
-* the line and, without `^`, scans all of it for a match it then discards unless
-* it started at the cursor — so an unanchored probe costs the whole remaining
-* line, and this tokenizer makes up to twenty of them per token.
+* - Patterns are anchored with `^`: unanchored, `StringStream.match` scans the whole rest of the line.
 */
 const COMMENT_END = /^\*\//;
 const COMMENT_START = /^\/\/|^#/;
@@ -346,14 +341,10 @@ const jsonnet = {
 };
 const DARK_GUTTER_ALPHA = "47";
 /**
-* The two diff fills, per scheme: light keeps the opaque pastel, dark tints the same `500` hue at
-* low alpha over whatever token surface is behind it.
+* The two diff fills per scheme: light uses the opaque pastel, dark the `500` hue at low alpha.
 *
-* - Its own module, importing nothing, so `MergeEditor` can share it without reaching into
-*   `CodeEditor/helpers.ts` and pulling the language modes and the CodeMirror runtime with it.
-* - Shared by the unified merge wash in `helpers.ts` and `buildDiffHighlightTheme` in
-*   `MergeEditor/decorations.ts`, so the two views cannot drift apart on the alphas.
-* - Callers pass the hue and the pastel; which one is used is this function's business.
+* - Imports nothing, so `MergeEditor` shares it without pulling in CodeMirror via `helpers.ts`.
+* - Shared by `helpers.ts` and `MergeEditor/decorations.ts`, so their alphas cannot drift.
 */
 const buildDiffWash = (scheme) => {
 	const dark = scheme === "dark";
@@ -367,16 +358,9 @@ const buildDiffWash = (scheme) => {
 /**
 * The tag colours layered over the stock github palette, per colour scheme.
 *
-* - Its own module, importing nothing but the tag vocabulary and the ramps, so
-*   `scripts/contrast-audit.ts` can measure the palette without pulling the language modes and the
-*   CodeMirror runtime into a build script.
-* - Later entries win over the stock rule for the same tag — both `githubLightInit` and
-*   `githubDarkInit` concatenate these after their own.
-* - `foreground` is the caller's, because it is a live `--*` token rather than a ramp step: the
-*   theme passes `resolveToken('foreground')`, the audit passes the scheme's channel value.
-* - Every ramp step here is a light/dark pair, and each pair is chosen against **two** surfaces —
-*   the theme's `background` setting is the page, but `variant="field"` paints on `muted`, which
-*   the theme never sees. Ratios in the comments are quoted `background` / `muted`.
+* - Imports only tags and ramps, so `scripts/contrast-audit.ts` can measure it.
+* - These override stock rules for the same tag.
+* - Colours are chosen against `background` and `muted` (`variant="field"`); ratios quote both.
 */
 const buildSyntaxPalette = (scheme, foreground) => {
 	const dark = scheme === "dark";
@@ -460,14 +444,10 @@ const EDITABLE_EDITOR = "&.cm-editor:has(.cm-content[contenteditable=\"true\"])"
 /**
 * Editor chrome and the unified merge (diff) wash.
 *
-* - Chrome surfaces (selection, read-only wash) resolve from live `--*` tokens, so they re-skin
-*   with brand and colour scheme. Fallback channels mirror the light-mode token values for SSR /
-*   no-provider parity.
-* - Diff colours stay categorical — fixed across brands, because added/removed is meaning, not
-*   chrome — but each is a light/dark pair from `buildDiffWash`, shared with
-*   `buildDiffHighlightTheme` in `MergeEditor/decorations.ts`.
-* - This wash reaches only `CodeEditor`'s *unified* merge view — the one a `previousValue` turns on.
-*   `MergePane` builds its own theme from scratch.
+* - Chrome resolves from live `--*` tokens; fallbacks mirror light-mode values for SSR.
+* - Diff colours are fixed across brands; light/dark pairs from `buildDiffWash`, shared with
+*   `MergeEditor/decorations.ts`.
+* - Only `CodeEditor`'s unified merge view uses this; `MergePane` has its own theme.
 */
 const buildBaseThemeStyles = (scheme) => {
 	const { line, gutter } = buildDiffWash(scheme);
@@ -533,30 +513,9 @@ const buildBasicSetup = (readOnly) => ({
 /**
 * The syntax theme, per colour scheme.
 *
-* - The stock github palette is picked by scheme: `githubDarkInit` under dark, `githubLightInit`
-*   otherwise. One palette cannot serve both — the light set scores 1.14:1 to 4.31:1 on the two
-*   dark surfaces, so 10 of its 11 colours failed AA there (UT-5194).
-* - `githubDarkInit` also passes `dark: true` to `EditorView.theme`, which sets the
-*   `EditorView.darkTheme` facet. That is what makes the `&dark` rules apply — CodeMirror's own
-*   base theme (cursor, selection layer, panels, buttons) and ours (`search.ts`,
-*   `highlighting.ts`) both key off it, so they follow the scheme without a second signal.
-* - Chrome (surface, gutter, selection, caret) resolves from live `--*` tokens, so it re-skins with
-*   the brand too. Fallback channels mirror the light-mode token values, for SSR and jsdom.
-* - `caret` and `selectionMatch` are pinned because the two initialisers disagree on them, and the
-*   branch would otherwise change values nothing here chose. The caret follows `foreground`; before
-*   the facet was set, CodeMirror's own default painted it black on the dark page, so it was
-*   invisible. `selectionMatch` is a 10% `primary` tint, which beats each initialiser's own value
-*   on the token it hurts most: 3.82:1 against the light default's 3.29, 5.40:1 against the dark
-*   default's 3.57. Any occurrence wash costs contrast — this is the cheapest one, and it is the
-*   same in both schemes.
-* - `styles` comes from `buildSyntaxPalette`, which lives apart so the audit script can measure it.
-*
-* Those overrides exist because the github theme paints every `name`-family tag one colour, and in
-* SQL nearly every token is a name — identifiers, function calls and `$variables` all drowned
-* together, and a keyword that doubles as a function (`create or REPLACE`) read as a value
-* (UT-5024). Instead: identifiers and brackets carry no colour, functions and special vars get
-* their own hues, and amber is unique to string literals — in JSON that shifts string values from
-* navy to amber, the one visible non-SQL change.
+* - Light github palette fails AA on dark surfaces, so the palette is picked by scheme.
+* - `githubDarkInit` sets the `EditorView.darkTheme` facet that every `&dark` rule keys off.
+* - `caret` and `selectionMatch` are pinned: the initialisers disagree on them.
 */
 const buildCustomTheme = (scheme) => {
 	const foreground = resolveToken("foreground", "30 41 59");
@@ -605,24 +564,14 @@ const shouldLintJson = (mode, readOnly) => mode === "application/json" && !readO
 /**
 * Wraps a lint source so a blank document produces no diagnostics.
 *
-* `jsonParseLinter` reports "Unexpected end of input" for empty content, which is right for a file and
-* wrong for an *optional* form field: it starts empty, and clearing it is how its value is removed.
-* Left unwrapped, every such field opens with a red gutter marker contradicting its own validation —
-* `CodeEditorField` puts six of them on one screen.
-*
-* Exported for its test: the wrapper is the behaviour worth pinning, and it needs no editor to exercise.
+* - For optional fields, where empty is valid but `jsonParseLinter` reports an error.
 */
 const skipBlankDocument = (source) => (view) => view.state.doc.toString().trim() === "" ? [] : source(view);
 /**
 * The JSON linter, optionally blind to a blank document.
 *
-* - `allowBlankDocument` is opt-in, and only `CodeEditorField` opts in (from `!required`). Suppressing
-*   the marker by default would break callers that treat empty as invalid *and* say so nowhere else:
-*   `ex-generic/JsonConfiguration.tsx`, `flows/TaskParamsModalContent.tsx` and
-*   `stream/PayloadTest.tsx` all gate their button on `isValidJsonConfig`, which is `false` for `''`,
-*   with no `disabledReason` — so the gutter marker is the only thing explaining a dead button.
-* - Not derivable from `variant`: `ex-generic/FunctionControl.tsx` is `variant="field"` and empty is
-*   an error there too. Whether blank is valid is the *field's* contract, not the control's shape.
+* - Opt-in: some callers rely on the marker alone to explain why empty disables their button.
+* - Not derivable from `variant` — whether blank is valid is the field's contract.
 */
 const buildJsonLinter = (allowBlankDocument) => {
 	const source = jsonParseLinter();
@@ -631,28 +580,18 @@ const buildJsonLinter = (allowBlankDocument) => {
 //#endregion
 //#region src/components/CodeEditor/editorChrome.ts
 /**
-* Mirrors `InputGroup` at the sizing each design language gives a `TextInput`,
-* so an editor dropped into a form reads as one of its fields.
+* Mirrors `InputGroup` at each design language's `TextInput` sizing, so it reads as a form field.
 *
-* The legacy preset reads the neutral ramp because the legacy `secondary`
-* variant does. No semantic token holds that grey, and the nearest one
-* (`--muted`) is a few points off — which is the "almost, but not quite, the
-* input next to it" mismatch this preset exists to remove.
-*
-* That ramp is fixed, so the legacy preset needs its own scheme pair — a legacy brand and the dark
-* scheme are independent choices, and `neutral[100]` under dark is a light slab: `foreground` on it
-* is 1.09:1 and the darkest syntax colour 2.69:1. Dark mirrors the same two steps from the other
-* end of the ramp (`800` / `900`, 5.00:1 and 6.14:1 for that colour).
+* - Same colour-scheme tokens as `InputGroup`, so it follows light/dark.
+* - argo: `muted`/`input`, the editable argo field's pair.
+* - legacy: `secondary` as `variant="secondary"`; readonly `muted`/`input` as base `InputGroup`.
 */
-const buildInputChrome = (isArgo, scheme) => {
-	const dark = scheme === "dark";
-	const legacySurface = dark ? colors.neutral[800] : colors.neutral[100];
-	const legacyReadOnly = dark ? colors.neutral[900] : colors.neutral[150];
+const buildInputChrome = (isArgo) => {
 	return {
-		surface: isArgo ? resolveToken("muted", "241 245 249") : legacySurface,
-		borderColor: isArgo ? resolveToken("input", "203 213 225") : legacySurface,
-		readOnlySurface: isArgo ? resolveToken("muted", "241 245 249") : legacyReadOnly,
-		readOnlyBorderColor: isArgo ? resolveToken("input", "203 213 225") : legacyReadOnly,
+		surface: isArgo ? resolveToken("muted", "241 245 249") : resolveToken("secondary", "226 232 240"),
+		borderColor: isArgo ? resolveToken("input", "203 213 225") : resolveToken("secondary", "226 232 240"),
+		readOnlySurface: resolveToken("muted", "241 245 249"),
+		readOnlyBorderColor: resolveToken("input", "203 213 225"),
 		hoverBorderColor: null,
 		focusBorderColor: isArgo ? resolveToken("primary", "37 99 235") : resolveToken("ring", "31 143 255"),
 		focusRing: `0 0 0 4px ${resolveToken("ring", "31 143 255", isArgo ? .5 : .3)}`,
@@ -677,10 +616,7 @@ const buildCanvasChrome = () => ({
 	paddingY: "8px",
 	paddingX: null
 });
-/**
-* Spread over `buildBaseThemeStyles()` — never used alone. The read-only keys
-* are the base's own, so they replace its wash instead of landing beside it.
-*/
+/** Spread over `buildBaseThemeStyles()`; read-only keys match the base's to replace its wash. */
 const buildChromeStyles = (chrome) => ({
 	"&.cm-editor": {
 		border: `solid 1px ${chrome.borderColor}`,
@@ -776,15 +712,8 @@ const searchViewPlugin = ViewPlugin.fromClass(class {
 /**
 * Match and current-match fills, per colour scheme.
 *
-* - `&dark` is how a *static* base theme follows the scheme, without becoming a
-*   `useThemedExtension` builder and a second entry in its never-evicting cache. It applies
-*   whenever the `EditorView.darkTheme` facet is set — see `buildBaseThemeStyles`' callers, which
-*   set it explicitly.
-* - Light text is `blue[700]`: 5.42:1 on the fill, and 6.29:1 for white on the current match.
-* - Dark tints `blue[500]` for the plain match, with `blue[200]` text: 11.10:1 on the page surface,
-*   8.86:1 on the `variant="field"` one. The current match keeps a solid `blue[500]` and takes
-*   `neutral[900]` as its text (5.78:1) — white on it is 2.55:1, since the token that reads as
-*   "strong" in light is a light colour.
+* - `&dark` keeps this a static base theme; it applies when the `EditorView.darkTheme` facet is set.
+* - Dark current match uses `neutral[900]` text: white on `blue[500]` is 2.55:1.
 */
 const searchTheme = EditorView.baseTheme({
 	".cm-searchMatch": { backgroundColor: colors.blue[100] },
@@ -820,20 +749,11 @@ const ToggleComponentHelp = () => /* @__PURE__ */ jsxs("div", { children: [
 //#region src/components/CodeEditor/tokenTheme.ts
 const themeCache = /* @__PURE__ */ new Map();
 /**
-* Memoize a CodeMirror theme/extension built from `resolveToken`, shared across
-* every instance that passes the same `cacheKey` and rebuilt whenever the active
-* brand / light-dark mode changes. `build` reads live `--*` values off `<html>`,
-* so the active theme is an invisible dependency a deps array can't see.
-*
-* `build` receives the scheme those values were read under, for the theme values
-* that are a light/dark *pair* rather than a token lookup (a categorical diff
-* wash has no semantic token, but an opaque light pastel still has to become a
-* low-alpha tint under dark). It comes from the same read that produced the key,
-* so a builder cannot resolve one scheme's colours under the other one's key.
+* A CodeMirror extension shared per `cacheKey`, rebuilt when the brand or light/dark mode changes.
 *
-* `cacheKey` is the extension's full identity: anything the builder closes over
-* must be part of it (e.g. `` `merge-pane:${deleted}` ``), or instances built
-* from different inputs would share one theme.
+* - `build` reads live `--*` values off `<html>`, a dependency no deps array can see.
+* - `scheme` comes from the same read as the key, for values that are a light/dark pair.
+* - `cacheKey` must include everything `build` closes over, or different inputs share a theme.
 */
 const useThemedExtension = (cacheKey, build) => {
 	const { scheme, cacheKey: themeKey } = useThemeAttributes();
@@ -850,19 +770,11 @@ const useThemedExtension = (cacheKey, build) => {
 const establishesFixedContainingBlock = (style) => style.transform !== "none" || style.translate !== "none" || style.rotate !== "none" || style.scale !== "none" || style.perspective !== "none" || style.filter !== "none" || style.backdropFilter !== "none" || /\b(paint|layout|strict|content)\b/.test(style.contain) || /\b(transform|perspective|filter|contain)\b/.test(style.willChange);
 const crops = (style) => style.overflowX !== "visible" || style.overflowY !== "visible" || style.maskImage !== "none" || style.contentVisibility !== "visible" || /\b(paint|strict|content)\b/.test(style.contain);
 /**
-* Where a tooltip can hang without being cropped, or `null` for "wherever
-* CodeMirror would put it anyway".
-*
-* Two ancestors matter, and they are not the same ancestor. The **outermost
-* cropper** is the one to get above — landing anywhere below it leaves the
-* tooltip inside the box doing the cropping. The **containing block** is where
-* the search can stop, because from there upwards `position: fixed` is measured
-* against that element and nothing higher can crop it.
+* Where a tooltip can hang uncropped, or `null` for CodeMirror's default.
 *
-* `document.body` and `<html>` are not treated as croppers: a fixed box whose
-* containing block is the viewport is not clipped by their overflow, and
-* hosting outside `<body>` would drop the tooltip out of the app's stacking and
-* pointer-events scope for no gain.
+* - Hosts above the outermost cropper.
+* - Stops at the fixed containing block; nothing higher can crop.
+* - `<body>` and `<html>` never count as croppers.
 */
 const findTooltipHost = (from) => {
 	let outermostCropper = null;
@@ -876,26 +788,9 @@ const findTooltipHost = (from) => {
 /**
 * `tooltips()`, re-hosted so the completion popup is never cropped.
 *
-* CodeMirror hangs tooltips inside the editor and lets `position: fixed` carry
-* them past its edges. That holds only while the viewport is their containing
-* block — a modal centred with a translate, a sheet sliding in, or a box under
-* paint containment takes that job, and then every scroller, mask and contained
-* box in between crops the popup instead. A tall editor hides the damage; a
-* one-line one shows a sliver of an unreadable list.
-*
-* The two shapes this has to survive in production are a `Modal`, whose body
-* scrolls and carries the argo fade mask, and kbc-ui's SQL editor, which wraps
-* every code block in `content-visibility: auto` to keep long scripts cheap.
-*
-* Hosting the layer above the outermost cropper clears all of that while keeping
-* the popup inside the modal's stacking, focus and pointer-events scope — which
-* `document.body` would not: the popup would sit behind the modal, and Radix
-* leaves the body `pointer-events: none` while a dialog is open.
-*
-* Both editors install this, and it is the only place either of them configures
-* a tooltip host. Keep it that way: CodeMirror's tooltip config takes the first
-* contributor that names a parent, so a second mechanism would not compose with
-* this one — it would silently win or lose on extension order.
+* - Must survive a masked, scrolling `Modal` and kbc-ui's `content-visibility: auto` blocks.
+* - Not `document.body`: the popup would sit behind the modal, which disables pointer events there.
+* - The only tooltip host in either editor: CodeMirror takes the first parent configured.
 */
 const tooltipsExtension = () => {
 	const layer = new Compartment();
@@ -909,9 +804,7 @@ const tooltipsExtension = () => {
 	})];
 };
 /**
-* The extension above, built once per editor. Rebuilding it would hand
-* CodeMirror a fresh compartment and plugin on every reconfigure, dropping the
-* host it had already resolved — so it is only ever reached through this hook.
+* The tooltips extension, built once per editor; a rebuild would drop the resolved host.
 */
 const useTooltipsExtension = () => useMemo(tooltipsExtension, []);
 //#endregion
@@ -962,13 +855,10 @@ const completeVariables = (variables = []) => {
 	};
 };
 /**
-* The completion source both editors install, with an identity that never moves.
+* The completion source both editors install, with a stable identity.
 *
-* Both hold it inside the memo that keys their whole extension tree, and callers
-* build the list inline — a config row mapped to `{ name, value }` in a store
-* selector, so a fresh array arrives on every store push. Because CodeMirror asks
-* the source for options rather than reading them up front, holding it steady costs
-* nothing: a completion request always reaches the latest render's variables.
+* - It keys their extension memo, while callers pass a fresh array on every store push.
+* - CodeMirror asks per request, so it still sees the latest variables.
 */
 const useVariableCompletion = (variables = []) => useStableCallback(completeVariables(variables));
 //#endregion
@@ -1019,7 +909,7 @@ const CodeEditor = ({ value, previousValue, onChange, variant = "plain", mode =
 	const isField = variant === "field";
 	const baseTheme = useThemedExtension(isField ? `code-editor:field:${isArgo ? "argo" : "legacy"}` : "code-editor:chrome", (scheme) => EditorView.theme({
 		...buildBaseThemeStyles(scheme),
-		...isField ? buildChromeStyles(buildInputChrome(isArgo, scheme)) : null
+		...isField ? buildChromeStyles(buildInputChrome(isArgo)) : null
 	}, { dark: scheme === "dark" }));
 	const commonExtensions = useMemo(() => {
 		const callerCompletions = completionSource ?? (completeAny ? completeAnyWord : autocompletions?.length ? autocompletions : null);
@@ -1128,4 +1018,4 @@ const CodeEditor = ({ value, previousValue, onChange, variant = "plain", mode =
 //#endregion
 export { CodeEditor, LANGUAGE_MODES, buildBaseThemeStyles, buildBasicSetup, buildCanvasChrome, buildChromeStyles, buildCustomTheme, buildDiffWash, isLanguageMode, searchExtension, updateSearch, useThemedExtension, useTooltipsExtension, useVariableCompletion };
 
-//# sourceMappingURL=CodeEditor-C9AS8Ch0.js.map
+//# sourceMappingURL=CodeEditor-BSo-oLFG.js.map